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在 Internet 莲 勃 发 展 的 今天 ，Web 应 用 如 日 中 天 , 越 来 越 多 的 信息 在 Web 站 点 上 呈现 ， 
特别 是 随 着 “互联 网 +” 模 式 的 不 断 推广 与 普及 ，Web 已 经 成 为 一 种 服务 和 开发 的 平台 ， 
从 最 初 简单 的 信息 发 布 逐渐 变 成 了 系统 , 其 中 Web 前 端 设 计 技术 已 经 成 为 从 事 互联 网 行业 
的 每 个 人 都 必须 掌握 的 最 基础 的 入 门 技术 。 

本 书 基于 Web 标准 和 响应 式 Web 设计 思想 ， 结 合 编者 长 期 从 事 Web 开发 和 教学 的 实 
际 经 验 ， 深 入 浅 出 地 介绍 了 Web 前 端 设计 技术 的 基础 知识 ， 对 Web 体系 结构 、HTML5、 
CSS3、JavaScript 和 网 站 制作 流程 进行 了 详细 的 讲解 。 

本 书 强调 理论 与 实践 相 结 合 ， 以 实用 为 前 提 , 包含 大 量 应 用 实例 , 注重 实际 操作 技能 ， 
力图 使 读者 通过 本 书 的 学 习 掌握 Web 前 端 设计 开发 的 相关 基础 知识 。 本 书 的 主要 特色 
如 下 : 

(1) 基于 Web 标准 ， 重 点 讲述 了 HIMLS、CSS3、ECMAScript 基础 和 JavaScript 脚本 
语言 ， 所 有 示例 都 通过 了 W3C 标准 检验 。 

(2) 整 本 书 通过 模拟 一 个 完整 的 实例 网 站 进行 讲解 ， 相 关 知 识 点 分 解 到 实例 网 站 的 具 
体 环节 中 ， 针 对 性 强 。 同 时 ， 本 书 提供 了 许多 示例 ， 具 有 可 操作 性 。 

(3) 语言 通俗 易 懂 ， 简 单 明 了 ， 可 以 使 读者 很 容易 地 掌握 有 关 知 识 。 

(4) 知识 结构 安排 合理 ， 循 序 渐进 ， 适 合 自学 。 

本 书 的 第 1 版 于 2017 年 3 月 出 版 ， 承 蒙 读者 的 厚爱 ， 出 版 后 受到 读者 的 普遍 欢迎 。 
随 着 Web 前 端 设计 技术 知识 的 不 断 更 新 并 经 过 两 轮 的 教学 实践 , 本 书 的 第 2 版 在 第 1 版 的 
基础 上 在 以 下 几 方 面 做 了 改进 : 

(1) 基于 响应 式 Web 设计 思想 ， 在 HTML5 中 增加 了 适应 移动 设备 的 相关 知识 点 ， 增 
加 了 新 的 元 素 ， 删 除了 过 时 的 元 素 。 

(2) 在 CSS3 中 增加 了 许多 新 的 样式 属性 和 单位 ， 布 局 方式 重点 介绍 了 伸缩 盒 ， 并 且 
基于 响应 式 Web 设计 思想 全 部 重新 编写 了 案例 。 

(3) 在 JavaScript 中 增加 了 Ajax 与 JSON， 例 子 适当 增加 难度 ,用 现代 JavaScript 思想 
规范 编写 脚本 代码 。 

(4) 对 第 1 版 中 的 有 关 知 识 点 采用 了 最 新 提 法 并 补充 完善 。 

本 书 的 第 1 一 7 章 由 贝 岩 编写 ， 第 8 一 23 章 由 张 树 明 编写 ， 全 书 由 张 树 明 统 稿 。 

为 满足 教学 和 读者 的 需要 ， 本 书 配 有 电子 课件 、 书 上 实例 的 源 代码 、 案 例 源 代码 和 习 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


题 参考 答案 等 资源 ， 需 要 者 请 扫描 下 方 的 二 维 码 : 


在 编写 本 书 的 过 程 中 ， 编 者 参阅 了 大 量 与 Web 前 端 设 计 技术 相关 的 书籍 和 网 络 资料 ， 
在 此 对 这 些 书籍 和 资料 的 作者 表示 感谢 。 由 于 编者 水 平 有 限 ， 书 中 难免 存在 不 足 之 处 ， 居 
请 读者 批评 指正 ， 读 者 也 可 以 直接 与 清华 大 学 出 版 社 联系 。 


编 者 
2019 年 1 月 


前 1 


1.1 Intemet 概述 
1.1.1 TCP/IP 
1.1.2 主机 和 也 地址 
1.1.3 域名 和 DNS- 

1.2 Web 概述 … 
1.2.1 Web 历史. 
1.2.2 ”Web 体系 结构 
1.2.3 ”基本 Web 技术 
1.2.4 ”Web 服务器- 

1.3” 超 文本 与 标记 语言 
1.3.1 超 文本 与 超 媒 体 -… 
1.3.2 标记 语言 ……………… 

1.4 ”Web 标准 


1.4.1 Web 标准 体系 …- 
1.42 采用 Web 标准 的 优势 - be 
1.5 浏览 器 ……… 


1.5.1 浏览 器 的 发 展 史 
1.5.2 浏览 器 的 内 核 
1.5.3 ”常用 浏览 器 … 
1.5.4 标准 浏览 器 
1.6 Web 开发 工具 
1.6.1 JetBrains WebStorm 
1.6.2 ”测试 和 调试 环境 
1.7 小 结 … 


攻 


FP 


2.3 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


2.1.1 HTMLS5 文档 结构 -… 


2.1.3 属性 26 
2.1.4 ”语法 规则 … 

WebStorm 基础 

2.2.1 WebStorm 的 基本 操作 -pp 28 
2.2.2 WebStorm 的 快捷 键 … 

文档 结构 元 素 


2.3.1 <html> 标 签 
2.3.2 ”<head> 标 签 - 
2.3.3 ”<body> 标 签 - 


2.4 头 部 元 素 SU 31 
2.4.1 ”<title> 标 签 … 
2.4.2 ”<meta> 标 签 和 
5 汶 叮 呆 纠 店 首 页 添加 元 信息 wm 35 
2.6 小 结 - 
2.7 习题 
HTMLS 内 容 结构 与 文本 37 
3.1 HIML5 结构 标签 a EE 
3.1.1 <header> 标 签 -7 38 


3.2 


.3 


3.1.2 ”<main> 标 签 . 
3.1.3 ”<nav> 标 签 - 
3.1.4 ”<article> 标 签 
3.1.5 ”<section> 标 签 
3.1.6 ”<aside> 标 签 . 
3.1.7 ”<footer> 标 签 
3.1.8 ”<details> 标 签 和 <summary> 标 签 
3.1.9 <div> 标 签 
3.1.10 ”<span> 标 签 
HTMLS5 基础 标签 
3.2.1 标题 
3.2.2 段落 
3.2.3 换行 符 
3.2.4 ”注释 … 


HTML5 格式 化 标签 
3.3.1 文本 格式 化 标签 


3.3.2 引用 和 术语 定义 标签 …- 
3.3.3 ”HTMLS5 新 增 格式 标签 


Ei 


3.4 


Es 


3.6 
3.7 


HTMLS 超 链接 


4.1 


4.2 


43 
4.4 
4.5 


HTMLS 列表 :于 nr 让 era 47 
3.4.1 无 序列 表 - 
3.4.2 ”有 序列 表 
3.4.3 ”定义 列表 
叮 叮 书店 首页 内 容 结构 的 建立 
3.5.1 分析 设 计 页 面 内 容 结构 
3.5.2 用 HTMLS 结构 标签 确定 页 面 内 容 结构 
3.5.3 ”添加 文本 内 容 -… 
3.5.4 在 浏览 器 中 预览 … 
小 结 - 
习题 … 


2 
4.1.1 href 属性 
4.1.2 target 属性 … 
4.1.3 
HTML5 字符 集 与 颜色 
4.2.1 HIMLS 字符 集 
4.2.2 HIMLS 字符 
4.2.3 ”HTMLS5 颜色 … 
4.2.4 HIMLS 颜色 名 
叮 叮 书店 首页 超 链接 的 使 用 
小 结 - 


习题- 


5.1.2 ”<map> 标 签 和 <area> 标 签 
5.1.3 ”<figure> 标 签 和 <figcaption> 标 签 
HIML5 音频 /视频 ……………… 
5.2.1 HTMLS5 视频 … 
5.2.2 HTMLS5 音频 … 
<embed> 标 签 

叮 叮 书店 首页 图 像 的 使 用 … 
小 结 - 
习题 … 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


6.1 表格 结构 和 表格 标签 
6.1.1 表格 结构 
6.1.2 表格 标签 … 

6.2 ”常用 表格 标签 … 
6.2.1 <table> 标签 8 
6.2.2 ”<tr> 标 签 … 
6.2.3 ”<td> 标 签 … 
6.2.4 ”<col> 标 签 
6.2.5 ”<thead>、<tbody> 和 <tfoot> 标 签 . 

63 用 吁 蕊 让 购物 土产 南面 的 建 间 wrap 

6.4 小结- 

6.5 习题- 

第 7 章 下 TMELS 家 痕 晤 0 88 

7.1 表单 的 基本 知识 

7.1.1 什么 是 表单 


7.1.2 ”<form> 标 签 


7.2 表单 


7.2.6 ”<option> 标 签 
7.2.7 ”<optgroup> 标 签 
7.2.8 ”<button> 标 
7.2.9 ”<datalist> 标 签 
7.2.10 ”<outpu 人 t> 标 签 
7.3 叮 叮 书店 “联系 我 们 ”页 面 的 建立 … 
7.4 为 叮 叮 书店 首页 添加 站 内 搜索 
7.5 小 结 - 


7.6 习题 … 

第 8 章 CSS 基础 108 
B81 CSS HM 108 
.OSD ee 110 
83 CSS 常用 选择 器 es 和 


种 9 和 章 


8.4 
8.5 


8.6 
8.7 
8.8 
8.9 


8.10 
8.11 


CSS3 选择 器 

CSS i 

8.5.1 CSS 常 上 : 

8.5.2 CSS 属性 值 和 单位 -… 

8.5.3 CSS3 属性 值 和 单位 - 

使 用 CSS - 

媒体 查询 … 

层 芭 样式 

使 用 Chrome 开发 者 工具 检查 编辑 页 面 及 样式 
小 结 


习题 


页 面 布 局 定位 sisi 139 


| 


9.2 


3 


9.4 


业 


CSS 盒 模型 
9.1.1 CSS 盒 模型 概述 
9.1.2 ”CSS 内 边 距 
9.1.3 CSS 边框 … 
9.1.4 CSS3 边框 
9.1.5 ”CSS 外 边 距 
9.1.6 CSS 轮廓 … 
CSS 布局 
9.2.1 盒 模 型 显示 类 型 … 
9.2.2 CSS3 伸缩 盒 布局 . 
9.2.3 ”CSS 浮动 
9.2.4 可 见 与 溢出 … 
CSS 定位 
9.3.1 position 属性 - 
9.3.2 ”z-index 属性 … 
基本 布局 模板 
9.4.1 固定 (液态 ) 布局 
9.4.2 ”弹性 伸缩 布局 (响应 式 Web 设计 ) … 
叮 叮 书店 首页 的 布局 样式 设计 … 


9.6 

有 

元 素 外 观 属性 193 
人 


10.1.1 CSS 背景 
二 


[vu 


10.3 


10.4 


10.5 
10.6 
10.7 
10.8 


10.10 
10.11 


了 2 
11.3 
11.4 
11.5 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


1 Be 0 198 


200 
200 
200 


10.2.4 字体 粗细 
10.2.5 CSS3 服务 器 端 字体 
文本 与 修饰 
10.3.1 文本 - 
10.3.2 修饰 - 
CSS3 文本 效果 - 
10.4.1 阴影 
10.4.2 换行 
CSS3 多 列 
列表 … 


10.8.1 表格 的 属 怕 
10.8.2 ”表格 的 边框 控 秆 
10.8.3 ”改善 表格 的 显示 效果 … 
10.8.4 


10.9.1 
10.92 
10.93 
10.9.4 
小 结 -. 
习题- 


11.1.1 超 链 接 伪 类 
11.1.2 ”结构 性 伪 类 - 
11.1.3 ” 子 元 素 伪 类 -… 
11.1.4 ”UI 元 素 状态 伪 类 


CSS 内 容 … 
小 结 -… 


习题 … 


12.1 
12.2 
4302.3 
12.4 
12.5 
12.6 


默认 样式 和 页 面 内 容 样式 设计 ……… 269 


13.1 ”默认 样式 二 269 
1 ed 
13.12 浏览 器 默认 样式 二 a 

13.2 ”页 面 内 容 样式 设计 

1 

0 杨 文 削 排 二 生生 


13.3 
13.4 


14.1 
14.2 
14.3 


14.3.1 书籍 分 类 …… 
14.3.2 ”特刊 降价 … 
14.3.3 ”联系 我 们 
14.3.4 ”关于 我 们 
14.3.5 详细 内 容 - 
14.3.6 ”购物 车 -en 


14.4.1 Tomcat 服务 器 的 安装 与 使 用 … 


14.5 -小结 
14.6 A 292 


JavaScript 和 ECMAScript 基础 


1 和 Jvaseonpt 半 他 :ei 
15.1.1 JavaScript 的 历史 和 主要 功能 -… he 
1 下 2 JavaSenpt 的 组 有 em 


15.4 
15:3 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


15.1.3 JavaScript 的 使 
15.1.4 JavaScript 消息 框 
15.1.5 开发 者 工具 Console - 
ECMAScript 基础 
15.2.1 ECMAScript 语法 基础 
15.2.2 ” ECMAScript 变量 
15.2.3 ECMAScript 关键 字 和 保留 字 PP 302 
15.2.4 ECMAScript 基本 数据 类 型 
15.2.5 ECMAScript 类 型 转换 
ECMAScript 运算 符 -… 
15.3.1 
15.3.2 
15.3.3 


习题 … 


算法 和 ECMAScript 语句 315 


16.1 


16.3 
16.4 
16.5 
16.6 


本 
16.1.1 算法 的 概念 
16.1.2 ”简单 算法 举例 
16.1.3 ”算法 的 特性 
16.1.4 算法 与 程序 
ECMAScript 语句 ee 
16.2.1 条 件 语句 … 8 
16.2.2 ”循环 语句 
16.2.3 break 和 continue 语句 
WebStorm 和 Chrome 协作 调试 JavaScript 脚本 程序 
使 用 Sources 调试 JavaScript 脚本 程序 ……………… 
小 结 … a 
习题 … 


UE 


17.1 


17.2 


st 
17.1.1 ECMAScript 函数 - 
17.1.2 ”ECMAScript 闭 包 - 
17.13 HTML 事件 下 
ECMAScript 对 象 …e 


17.2.1 对 象 和 类 
17.2.2 ”创建 和 使 用 对 象 
17.2.3 ECMAScript 引 月 
17.2.4 ECMAScript 对 象 类 型 - 
17.3 ”错误 处 理 
17.4 ”内 置 对 象 和 本 地 对 象 … 
17.4.1 Math 对象 
17.4.2 全 局 对 象 
17.4.3 Array 对 象 … 
17.4.4 Date 对 象 
17.5 叮 叮 书店 首页 显示 日 期 和 时 间 


18.1 DOM 概述 … 
18.1.1 DOM 简介 
18.1.2 ”节点 和 节点 树 


18.2 
18.2.1 
18.2.2 HTMLElement 对 象 … 
18.2.3 HTMLDocument 对 象 … 
18.2.4 访问 节点 
18.3 DOM 与 CSS 
次 六 | Style 对 象 EE RR 
18.3.2 ”CurrentStyle 对 象 … 人 
18.3.3 StyleSheet 对 象 … 


18.4 叮 叮 书店 首页 图 片 轮 播 广告 的 实现 … 

18.5 
18.6 “习题 
HTML DOM 对 象 和 RegExp 对 象 ……………………… 378 
19.1 HTML DOM 对 象 


I. 
19.12 
19.1.3 


Document 对 象 


Anchor 对 象 … 
19.1.4 Event 对 象 本 
19.1.5 Checkbox 和 Radio 对 象 -二 388 
190:6 ERDlaad 对 入 390 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


19.1.7 Text 和 Password 对 象 392 
19.1.8 Textarea 对 和 象 
19.1.9 _ Select 和 Option 对 和 象 
19.1.10 Submit、Reset 和 Button 对 象 … 
19.1.11 Form 对 和 象 
19.1.12 ”一 个 小 游戏 一 剪子 石头 布 - 


下 国 区 主要 
19.3 叮 叮 书店 “联系 我 们 ”页 面 的 表单 数据 验 
19.4 
19.5 
HTMELS DOM sD ni 411 


20.1 Canvas 对 象 
20.1.1 ”Canvas 基础 
20.1.2 ”使 用 路 径 … 
20.1.3 ”绘制 文本 -… 
20.1.4 绘制 图 像 
20.2 HTMLS 拖 放 
20.3 HTMLS 数据 存储 
20.3.1 ， sessionStorage 对 象 
20.3.2 localStorage 对 象 - 
20.4 实现 叮 叮 书店 “书籍 分 类 ”页 面 拖 放 图 书 到 购物 : 
20.5 小 结 … 


ee 


5 
21.1.1 Window 对 象 
21.1.2 Navigator 对 象 … 
21.1.3 Sereen 对 象 -pe 
21.1.4 Location 对象-… 
21.1.5 History 对 象 … 

21.2 元素 的 大 小 与 位 置 


21.3” 叮 叮 书店 首页 的 浮动 广告 
21.4 
21.5 

Ria SION ga 
GD ee 


| xl 


附录 A 


22.2.1 
2 


22.3 JSON 
22.3.1 JSON 的 语法 … 
22.3.2 JSON 的 使 用 … 

22.4 小结- 

22.5 习题 … 


jQuery pT 


23.1 jQuery 基础 
23.1.1 添加 jQuery 库 
23.1.2 jQuery 的 语法 … 

23.2 ”特效 和 动画 

23.3 HTML 操作 … 


23.5 叮 叮 书店 “ 试 读 ” 页 面 的 建立 
23.6 小结- 


HTML5 内 容 结构 和 文本 
HTML5 超 链接 和 多 媒体 
HTML5 表格 和 表单 
CSS3 布局 与 定位 

CSS3 元 素 外 观 样 式 设 计 
CSS3 动画 
行为 与 对 象 及 DOM - 
HTML DOM 表单 数据 验证 …- 
HIML5 DOM 


XIll | 


Web 的 本 意 是 易 蛛 网 ， 现 常 指 Internet 的 Web 技术 。Web 技术 提供 了 方便 的 信息 发 布 
和 交流 方式 ， 是 一 种 典型 的 分 布 式 应 用 结构 ，Web 应 用 中 的 每 一 次 信息 交换 都 要 涉及 客户 
端 和 服务 器 ,客户 端 技术 是 Web 技术 的 基础 。 本 章 首先 介绍 Intemet 基础 知识 和 基本 概念 ， 
接 下 来 了 解 Web 技术 体系 结构 ， 然 后 介绍 超 文本 与 标记 语言 的 相关 知识 ， 接 着 介绍 Web 
标准 ， 了 解 什么 是 标准 浏览 器 。 

本 章 要 点 : 

< 信 Internet 基础 。 

< 如 Web 体系 结构 。 

如 超 文 本 与 标记 语言 。 

< Web 标准 。 

和 浏览 器 。 


1.1 Internet 概述 


Internet 的 中 文正 式 译名 为 因特网 , 它 是 一 个 全 球 性 的 、 开 放 的 计算 机 互联 网 络 。Internet 
连 入 的 计算 机 几乎 覆盖 了 全 球 绝 大 多 数 的 国家 和 地 区 ， 存 储 了 丰富 的 信息 资源 ， 因 此 是 世 
界 上 最 大 的 计算 机 网 络 。 可 以 认为 Intemet 是 由 许多 小 的 网 络 〈 子 网 ) 互联 而 成 的 逻辑 网 ， 
每 个 子 网 中 连接 着 若干 台 计算 机 〈 主 机 )。Internet 以 共享 资源 为 目的 ， 并 遵守 相同 的 通信 
协议 。 


1.1.1 TCP/IP 


Intemet 由 复杂 的 物理 网 络 将 分 布 在 世界 各 地 的 主机 连接 在 一 起 ， 在 Intemet 中 要 维持 
通信 双方 的 计算 机 系统 连接 ， 做 到 信息 完好 流通 ， 必 须 有 一 项 各 个 网 络 都 能 共同 遵守 的 信 
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息 沟通 技术 ， 即 网 络 通信 协议 。 

Internet 上 多 个 网 络 共同 遵守 的 网 络 协议 是 TCP/P，TCP/IP 是 一 组 协议 。TCP/IP 是 
Transmission Control Protocol/Internet Protocol 的 简写 ， 中文 译 名 为 “传输 控制 协议 ”和 “ 因 
特 网 互联 协议 ”或 “网 际 协议 ” 它 是 Intemet 最 基本 的 协议 ， 是 Intemet 的 基础 。 

TCP/IP 定义 了 主机 如 何 连 入 因特网 ， 以 及 数据 如 何在 主机 之 间 传 输 的 标准 。TCP/IP 
是 一 个 4 层 的 分 层 体系 结构 ， 其 核心 是 传输 层 (Transport Layer) 的 传输 控制 协议 ， 它 负责 
组 成 信息 或 把 文件 拆 成 更 小 的 包 ， 以 及 网 际 层 〈Intemet Layer) 的 网 际 协议 ， 它 处 理 每 个 
包 的 地 址 部 分 ， 使 这 些 包 正确 地 到 达 目 的 地 ， 如 图 1.1 所 示 。 

TCP/IP 的 基本 传输 单位 是 数据 包 ， 数 据 在 传输 时 分 成 若干 段 ， 每 个 数据 段 称 为 一 个 数 
据 包 。 在 发 送 端 ，TCP 负责 把 数据 分 成 一 定 大 小 的 若干 数据 包 ， 并 给 每 个 数据 包 标 上 序号 
及 一 些 说 明 信 息 ， 保 证 接收 端 收 到 数据 后 ， 在 还 原 数据 时 按 数 据 包 序号 把 数据 还 原 成 原来 
的 格式 。IP 负责 给 每 个 数据 包 填写 发 送 主 机 和 接收 主机 的 地 址 ， 这 样 数 据 包 就 可 以 在 物理 
网 上 传送 了 ， 如 图 1.2 所 示 。 


[| WA | 
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网 际 层 
网 络 访问 层 


图 1.1 TCP/IP 分 层 体系 结构 图 1.2 TCP/IP 数据 包 


TCP 负责 数据 传输 的 可 靠 性 ， 卫 负责 把 数据 传输 到 正确 的 目的 地 。 
为 了 区 分 同一 台 主 机 不 同 Internet 应 用 程序 间 的 通信 ，TCP 在 数据 包 中 增加 了 一 个 称 
为 端口 号 的 数值 〈0 一 65 535)， 例 如 端口 号 80 表示 HITP 的 通信 。 


1.1.2 主机 和 1IP 地 址 


在 Intemet 上 连接 的 所 有 计算 机 ， 从 大 型 机 到 微型 计算 机 都 是 以 独立 的 身份 出 现 ， 称 
为 主机 。 为 了 实现 各 主机 间 的 通信 ， 每 台 主机 必须 有 一 个 唯一 的 网 络 地 址 ， 就 像 每 个 人 都 
有 唯一 的 身份 证 号 一 样 ， 这 样 才 不 至 于 在 传输 数据 时 出 现 混 乱 ， 这 个 地 址 叫 作 IP (Internet 
Protocol) 地 址 ， 即 TCP/IP 表示 的 地 址 。 

目前 使 用 的 也 地 址 是 用 32 位 二 进 制 数 表示 的 ， 
为 了 便于 记忆 ， 将 它们 分 为 4 组 ， 每 组 8 位 ， 由 小 数 
点 分 开 ， 用 4 字 节 来 表示 ， 用 下 圆 点 分 开 的 每 个 字 节 10101100.00010000.11111110.00000001 
的 十 进 制 整数 数值 范围 是 0~255， 例 如 某 主机 的 卫 1 字 节 -8 位 


IPv4 地 址 〈 点 分 十 进 制 ) 
le 16 254 a 


地 址 可 表示 为 10101100.00010000.11111110.00000001， 32 位 a 或 4 字 节 
也 可 表示 为 172.16.254.1, 这 种 书写 方法 叫 作 点 数 表示 
法 ， 如 图 1.3 所 示 。 图 1.3 ”IPv4 地 址 的 构成 
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了 P 地 址 是 层次 地 址 ， 由 网 络 号 和 主机 号 组 成 ， 网 络 号 表示 主机 所 连接 的 网 络 ， 主 机 号 
标识 了 网 络 上 特定 的 主机 。 


1.1.3 域名 和 DNS 


域名 (Domain Name) 是 由 一 串 用 点 分 隔 的 名 字 组 成 的 Intemet 上 某 一 台 主机 或 一 组 主 
机 的 名 称 , 用 于 在 数据 传输 时 标识 主机 的 位 置 。 那么 有 了 人 P 地 址 为 什么 还 使 用 域名 作为 主 
机 的 名 称 呢 ? 主 要 是 了 P 地 址 的 二 进 制 数字 难于 记忆 ， 为 了 方便 ， 人 们 用 域名 来 替代 了 琴 地址 。 

域名 系统 采用 分 层 结构 。 每 个 域名 是 由 几 个 域 组 成 的 ， 域 和 域 之 间 用 “.” 分 开 ， 最 未 
的 域 称 为 顶级 域 ， 其 他 的 域 称 为 子 域 ， 每 个 域 都 有 一 个 有 明确 意义 的 名 字 ， 分 别 叫 作 顶级 
域名 和 子 域名 。 

从 www.tsinghua.edu.cn 这 个 域名 来 看 ， 它 是 由 几 个 不 同 的 部 分 组 成 的 ， 这 几 个 部 分 彼 
此 之 间 具 有 层次 关系 。 其 中 ， 最 后 的 cn 是 域名 的 第 一 层 ，edu 是 第 二 层 ，tsinghua 是 真正 
的 域名 ， 处 在 第 三 层 ， 当 然 还 可 以 有 第 四 层 ， 域 名 从 后 到 前 的 层次 结构 类 似 于 一 个 倒立 的 
树 形 结构 ， 第 一 层 的 cn 叫 作 地 理 顶 级 域名 。 

目前 Intemet 上 的 域名 体系 中 共有 3 类 顶级 域名 : 一 类 是 地 理 顶 级 域名 ， 共 有 243 个 
国家 和 地 区 的 代码 ， 例 如 CN (中 国 )、P (日 本 ) 和 UK (英国 ) 等 ， 另 一 类 是 类 别 顶 级 
域名 ， 共 有 7 个 ， 即 COM (公司 )、NET (网络 机 构 )、ORG (组 织 机 构 )、EDU (美国 教 
育 )、GOV (美国 政府 部 门 )、ARPA (美国 军 方 ) 和 INT (国际 组 织 )。 由 于 Intemet 起 源 
于 美国 ， 所 以 最 初 的 域名 体系 主要 由 美国 使 用 , 只 有 COM、NET 和 ORG 是 供 全 球 使 用 的 
顶级 域名 ， 但 随 着 Internet 的 不 断 发 展 ， 新 的 顶级 域名 根据 实际 需要 不 断 被 扩充 到 现 有 的 
域名 体系 中 ， 新 增加 的 顶级 域名 是 BIZ 商业)、COOP (合作 公司 )、INFO (信息 行业 )、 
AERO (航空 业 )、PRO (专业 人 士 )、MUSEUM (博物 馆 行业 ) 和 NAME (个 人 )。 

在 这 些 顶 级 域名 下 ， 可 以 根据 需要 定义 次 一 级 的 域名 ， 例 如 在 我 国 的 顶级 域名 CN 下 
又 设立 了 由 类 别 COM、NET、ORG、GOV 和 EDU 以 及 我 国 各 个 行政 区 划分 的 字母 代表 
所 组 成 的 二 级 域名 。 

实际 上 Internet 主机 间 的 通信 必须 采用 IP 地 址 进行 寻 址 ， 所 以 在 使 用 域名 时 必须 把 域 
名 转换 成 他 地 址 。 

DNS 是 域名 系统 (Domain Name System) 的 缩写 ， 它 主要 由 域名 服务 器 组 成 。 域 名 服 
务 器 是 指 保存 有 该 网 络 中 所 有 主机 的 域名 和 对 应 的 瑟 地 址 ， 并 有 具有 将 域名 转换 为 PP 地 址 
功能 的 服务 器 。 例 如 要 访问 清华 大 学 www.tsinghua.edu.cn) 网 站 ， 必 须 通过 DNS 将 域名 
www.tsinghua.edu.cn 的 IP 地 址 121.52.160.5 得 到 才能 进行 通信 。 


1.2 Web 概述 


现在 的 Internet 已 经 普及 到 整个 社会 ， 其 中 的 Web 技术 已 经 成 为 Intemet 上 最 受 欢迎 
的 应 用 ， 正 是 由 于 它 的 出 现 ，Intemet 普及 推广 的 速度 才 大 大 提高 。 


31 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


Web 是 World Wide Web 的 简称 , Web 提供 了 全 新 的 信息 发 布 与 浏览 模式 , 实际 上 Web 
是 运行 在 Intemet 之 上 的 所 有 Web 服务 器 软件 和 所 管理 对 象 的 集合 ， 对 象 主要 包括 网 页 
(Web Page) 和 程序 。 


1.2.1 Web 历史 


Web 技术 诞生 于 欧洲 原子 能 研究 中 心 (CERN)。1989 年 3 月 ，CERN 的 物理 学 家 Tim 
Bermers-Lee 提出 了 一 个 新 的 因特网 应 用 ,命名 为 Web， 其 目的 是 让 全 世界 的 科学 家 能 利用 
因特网 交换 文档 。 同 年 ， 他 编写 了 第 一 个 浏览 器 与 服务 器 软件 。1991 年 ，CERN 正式 发 布 
了 Web 技术 。 

1993 年 3 月 ， 网 景 (Netscape) 公司 的 创始 人 马克 “安德森 与 好 友 埃 里 克 * 比 纳 合作 开 
发 了 支持 图 像 的 浏览 器 一 Mosaic， 并 在 网 上 迅速 扩散 。1994 年 4 月 ， 安 德 森 与 SGI 公司 
的 创始 人 吉姆 克拉克 共同 创办 了 网 景 公 司 ， 安 德 森 等 人 又 重 写 了 Mosaic， 于 1994 年 10 
月 推出 了 Navigator 浏览 器 ,后 来 改名 为 Netscape 浏览 器 .1995 年 , Netscape 公司 的 Brendan 
Eich 在 Netscape 浏览 器 里 使 用 了 JavaScript， 为 浏览 器 提供 了 脚本 功能 。1995 年 ， 微 软 公 
司 从 伊利 诺 大 学 购买 Mosaic， 并 在 此 基础 上 开发 出 正 〈Intermet Explorer) 浏览 器 ， 从 此 
Web 应 用 步 入 了 “快车 道 ” 

下 面 这 些 组 织 机 构 对 Web 技术 的 发 展 影响 较 大 。 

@wic 

1994 年 ，CERN 和 MIT (Massachusetts Institute of Technology) 共同 建立 了 Web 联盟 
(World Wide Web Consortium，W3C，http:/www.w3.org/ )。 该 组 织 致 力 于 进一步 开发 Web 
技术 和 对 协议 进行 标准 化 等 工作 。W3C 下 辖 的 HTML 工作 组 负责 发 布 HTML5 规范 。 

©@ IETF 

IETF (Intemet Engineering Task Force，Internet 工程 任务 组 ，http://www.ietf.org/) 是 全 
球 Internet 最 具 权 威 的 技术 标准 化 组 织 , 主要 任务 是 负责 Intemet 相关 技术 规范 的 研发 和 制 
定 。HTMLS5 定义 一 种 新 的 API (WebSocket API) 依赖 于 WebSocket Protocol，IETF 工作 
组 开发 这 个 协议 。 

@ WHATWG 

WHATWG (Web Hypertext Application Technology Working Group，Web 超 文 本 应 用 技 
术 工 作 组 ，http://www.whatwg.org/) 是 Web 浏览 器 生产 厂商 和 一 些 相 关 团体 组 成 的 一 个 松 
散 的 、 非 正式 的 协作 组 织 ， 由 Apple、Mozilla、Opera、Google 等 公司 发 起 成 立 ,。 WHATWG 
开发 HTML5 和 Web 应 用 API。 

@ ECMA 

ECMA (European Computer Manufactures Association， 欧 洲 计算 机 制造 商 协会 ， 
http://www.ecma-international.org/) 是 由 主流 厂商 组 成 的 ， 主 要 任务 是 研究 信息 和 通信 技术 
方面 的 标准 并 发 布 有 关 技 术 报 告 。ECMA 发 布 了 ECMA-262 标准 化 脚本 程序 设计 语言 ， 
这 种 语言 在 Intemet 上 应 用 广泛 ， 被 称 为 JavaScript， 它 实际 上 是 ECMA-262 标准 的 实现 和 
扩展 。 


| 4 


第 1 章 Web 技术 概述 01 


1.2.2” Web 体系 结构 


Web 是 基于 浏览 器 /服务 器 (B/S) 的 一 种 体系 结构 , 客户 在 计算 机 上 使 用 浏览 器 向 Web 
服务 器 发 出 请 求 ， 服 务 器 响应 客户 请 求 ， 向 客户 回 送 所 请 求 的 网 页 ， 客 户 在 浏览 器 窗口 上 


显示 网 页 的 内 容 ， 如 图 1.4 所 示 。 Web 服 务 器 
Web 体系 结构 主要 由 以 下 3 部 分 链接 到 URL 的 超 链接 www.tsinghua.edu.cn 
组 成 : , - 
@ Web 服务 器 
用 户 要 访问 Web 页 面 或 其 他 资源 ， 


HTTP 使 用 此 TCP 连 


必须 事先 有 一 个 服务 器 来 提供 Web 页 面 
和 这 些 资源 ， 这 种 服务 器 就 是 Web 服务 
器 ， 也 称 为 网 站 。 


@ 客户 端 图 1.4 Web 体系 结构 
用 户 一 般 是 通过 浏览 器 访问 Web 资源 的 ， 它 是 运行 在 客户 端的 一 种 软件 。 
@ 通信 协议 


客户 端 和 服务 器 之 间 采 用 HTTP (Hypertext Transfer Protocol， 超 文本 传输 协议 ) 进行 
通信 。HTTP 是 客户 浏览 器 和 Web 服务 器 通信 的 基础 。 


1.2.3 基本 Web 技术 


@UrL 

在 Intemet 上 有 众多 的 服务 器 ， 每 台 服 务 器 上 又 有 很 多 信息 ， 客 户 端 如 何 能 正确 识别 
每 台 服务 器 并 发 送 请 求 呢 ? Web 使 用 URL (Uniform Resource Locator， 统 一 资源 定位 符 ) 
技术 来 标识 服务 器 及 服务 器 信息 。 

URL 通过 定义 资源 位 置 的 标识 来 定位 网 络 资源 。URL 的 格式 如 下 : 

<scheme>:<scheme-specific-part> 


其 中 ，<scheme> 指 所 用 的 URL 方案 名 , 方案 名 由 字符 组 成 ， 包 括 字 母 (a 一 z)、 数 字 (0 一 
9)、 加 号 〈+)、 句 点 〈.) 和 连 字符 〈-)， 字 母 不 分 大 小 写 ;: <scheme-specific-part> 的 具体 
含义 与 所 用 方案 有 关 。 

对 于 Intemet，<scheme> 指 协议 名 ， 主 要 包括 http、fpp、gopher、mailto、new、hnntp、 
telnet、wais 和 file 等 ， 以 后 可 能 还 会 不 断 扩充 。 

HTTP URL 方案 用 于 表示 可 通过 HTTP 访问 Intemet 资源 。HTTP URL 的 格式 如 下 : 


http://<host>:<port>/<path>?<searchpart> 
其 中 ，<host> 是 主机 域名 或 下 地 址 ，<port> 表 示 端 口号 ，<host> 和 <port> 之 间 用 “:” 隔 开 ， 
如 果 省 略 <port>， 默 认 端 口 为 80; <path> 是 要 请 求 访问 的 文件 的 路 径 ，<searchpart> 是 查询 
字符 串 , 指定 通过 URL 传递 的 参数 , 它们 都 是 可 选 的 , 如 果 这 两 项 不 存在 , <host> 或 <port> 
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后 的 斜 杠 也 不 应 该 省 略 。 

例如 “http:/wwwtsinghua.edu.cn/publish/th/index.html”， 其 中 http 是 协议 名 ， 
www.tsinghua.edu.cn 是 域名 ，publish/th/index.html 是 要 请 求 访问 的 文件 的 路 径 ， 包 括 文 
件 名 。 

@ HTTP 

HTTP (Hypertext Transfer Protocol， 超 文本 传输 协议 ) 是 Web 技术 的 核心 ，HTTP 设 
计 了 一 套 相当 简 单 的 规则 ， 用 来 支持 客户 端 主机 和 服务 器 主机 之 间 的 通信 。 

HTTP 采用 客户 /服务 器 (C/S) 结构 ， 定 义 了 客户 端 和 服务 器 之 间 进 行 “ 对 话 ” 的 请 
求 响应 规则 。 客 户 端的 请 求 程序 与 运行 在 服务 器 端的 接收 程序 建立 连接 ， 客 户 端 发 送 请 求 
给 服务 器 ，HTTP 规则 定义 了 如 何 正确 解析 请 求 信 息 ， 服 务 器 用 响应 信息 回复 请 求 ， 响 应 
信息 中 包含 了 客户 端 希望 得 到 的 信息 。HTTP 并 没有 定义 网 络 如 何 建立 连接 、 管 理 以 及 信 
息 如 何 发 送 ， 这 些 由 底层 协议 TCP/IP 来 完成 ，HTTP 是 建立 在 TCP/IP 之 上 的 ， 属 于 应 用 
层 协 议 。 

当 客 户 端 浏览 器 向 Web 服务 器 请 求 服务 时 可 能 会 发 生 错 误 , 此 时 服务 器 会 返回 一 系列 
状态 消息 ， 表 1.1 一 表 1.5 列 出 了 服务 器 返回 的 各 种 状态 信息 。 
表 1.1 HTTP 1xx 状态 信息 

描 述 

服务 器 仅 接收 到 部 分 请 求 ， 但 是 服务 器 并 没有 拒绝 该 请 求 ， 客 户 端 
应 该 继续 发 送 其 余 的 请 求 
服务 器 将 遵从 客户 的 请 求 转换 到 另外 一 种 协议 


100 Continue 


101 Switching Protocols 


表 1.2 HTTP 2xx 成 功 信 息 
消息 描述 
200 OK 请 求 成 功 
201 Created 请 求 被 创建 完成 ， 同 时 新 的 资源 被 创建 
202 Accepted 供 处 理 的 请 求 已 被 接受 ， 但 是 处 理 未 完成 
203 Non-authoritative Information | 文档 已 经 返回 ， 因 为 使 用 的 是 文档 的 副本 ， 一 些 应 答 头 可 能 不 正确 


204 No Content 没有 新 文档 。 浏 览 器 应 该 继续 显示 原来 的 文档 
205 Reset Content 没有 新 文档 。 浏 览 器 应 该 重 置 它 所 显示 的 内 容 
206 Partial Content 客户 发 送 了 一 个 带 有 Range 头 的 GET 请 求 ， 服 务 器 完成 了 它 
表 1.3 HTTP 3xx 重 定向 信息 
消息 描 述 
300 Multiple Choices 多 重 选 择 。 用 户 可 以 选择 某 链接 到 达 目 的 地 ， 最 多 允许 5 个 地 址 


301 Moved Permanently 


所 请 求 的 页 面 已 经 转移 至 新 的 URL 


302 Found 
303 See Other 


所 请 求 的 页 面 已 经 临时 转移 至 新 的 URL 
所 请 求 的 页 面 可 在 其 他 URL 下 被 找到 
未 按 预 期 修改 文档 。 客 户 端 有 缓冲 的 文档 并 发 出 了 一 个 条 件 性 的 请 


人 求 。 服 务 器 告诉 客户 ， 原 来 缓冲 的 文档 还 可 以 继续 使 用 
5 客户 请 求 的 文档 应 该 通过 Location 所 指明 的 代理 服务 器 提取 

306 Unused 此 代码 被 用 于 前 一 版 本 ， 目 前 已 不 再 使 用 ， 但 是 代码 依然 被 保留 
307 Temporary Redirect 怖 时 备 定向 ， 由 服务 器 根据 情况 动态 指定 备 定 向 地 址 
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表 1.4 HTTP 4xx 客户 端 错误 信息 


消息 描 述 
400 Bad Request 服务 器 未 能 理解 请 求 
401 Unauthorized 被 请 求 的 页 面 需要 用 户 名 和 密码 
402 Payment Required 此 代码 尚 无 法 使 用 
403 Forbidden 对 被 请 求 页 面 的 访问 被 禁止 
404 Not Found 服务 器 无 法 找到 被 请 求 的 页 面 
405 Method Not Allowed 请 求 中 指定 的 方法 不 被 允许 
406 Not Acceptable 服务 器 生成 的 响应 无 法 被 客户 端 所 接受 
407 Proxy Authentication Required 用 户 必须 首先 使 用 代理 服务 器 进行 验证 ， 这 样 请 求 才 会 被 处 理 
408 Request Timeout 请 求 超 出 了 服务 器 的 等 待 时 间 
409 Conflict 由 于 冲突 ， 请 求 无 法 被 完成 
410 Gone 被 请 求 的 页 面 不 可 用 
411 Length Required "Content-Length" 未 被 定义 。 如 果 无 此 内 容 ,， 服务 器 不 会 接受 请 求 
412 Precondition Failed 请 求 中 的 前 提 条 件 被 服务 器 评估 为 失败 
413 Request Entity Too Large 由 于 所 请 求 的 实体 太 大 ， 服 务 器 不 会 接受 请 求 
414 Request-url Too Long 由 于 URL 太 长 ， 服 务 器 不 会 接受 请 求 
415 Unsupported Media Type 由 于 媒介 类 型 不 被 支持 ， 服 务 器 不 会 接受 请 求 


表 1.5 HTTP 5xx 服务 器 错误 信息 
消息 描 述 
500 Internal Server Error 成 。 服 务 器 遇 到 不 可 预知 的 情况 
501 Not Implemented 。 服 务 器 不 支持 所 请 求 的 功能 


502 Bad Gateway 。 服 务 器 从 上 游 服 务 器 收 到 一 个 无 效 的 响应 
503 Service Unavailable 请 求 未 完成 。 服 务 器 临时 过 载 或 宕 机 
504 Gateway Timeout 网 关 超 时 


505 HTTP Version Not Supported 服务 器 不 支持 请 求 中 指明 的 HTTP 协议 版 本 


©@ MIME 

MIME (Multipurpose Intemet Mail Extension， 多 用 途 Internet 邮件 扩展 ) 是 一 个 开放 的 
多 语言 、 多 媒体 电子 邮件 标准 ， 为 了 满足 用 户 在 不 同 的 软件 平台 和 硬件 平台 的 信息 交换 而 
制订 ， 它 规定 了 不 同 数据 类 型 的 名 字 。 

Web 文档 需要 的 信息 不 仅仅 局 限于 文本 ， 还 有 图 像 、 视 频 和 声音 等 数据 类 型 ， 所 有 类 
型 文档 的 存储 和 传送 都 是 以 二 进 制 数据 形式 进行 的 。 在 Web 服务 器 程序 看 来 ， 所 有 类 型 文 
档 没有 什么 区 别 ， 但 是 客户 端 浏览 器 却 能 够 将 Web 文档 正确 地 识别 和 显示 ， 实 际 上 ， 浏览 
器 事先 对 文档 的 内 容 一 无 所 知 。 

如 果 要 做 到 这 必须 让 Web 服务 器 根据 文件 的 扩展 名 给 出 文档 类 型 的 宏观 描述 。 
Web 借用 了 MIME 标准 , 即 服务 器 根据 数据 文件 的 扩展 名 生成 相应 的 MIME 类 型 返回 给 浏 
览 器 ， 浏 览 器 根据 MIME 类 型 处 理 不 同类 型 的 数据 。Web 仅 用 到 MIME 的 一 个 子 集 。 

MIME 的 头 格 式 为 type/subtype， 其 中 type 表示 数据 类 型 ， 主 要 有 text、image、audio、 
video、application、multipart 和 message，subtype 则 指定 所 用 格式 的 特定 信息 。 表 1.6 列 出 
了 常用 的 MIME 类 型 。 
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表 1.6 常用 的 MIME 类 型 
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类 型 / 子 类 型 扩 展 名 
application/hta hta 
application/internet-property-stream acX 
application/msword doc、 dot 
application/vnd.openxmlformats-officedocument.wordprocessingml.document | docx 


application/octet-stream 


*、bin、class、dms、exe、 
lha、lzh 


application/pdf pdf 
application/rtf rf 
application/vnd.ms-excel xla、xlc、xlm、xls、xlt、xlw 
application/vnd.ms-outlook msg 
application/vnd.ms-powerpoint pot、pps、ppt 
application/vnd.openxmlformats-officedocument.presentationml.presentation pptx 
application/vnd.ms-project mpp 
application/vnd.ms-works wcm、 wdb、 wks、wps 
application/winhlp hlp 
application/x-director dcr、dir、dxr 
application/x-iphone 过 
application/x-javascript js 
application/x-msaccess mdb 
application/x-msmetafile wmf 
application/x-shockwave-flash swf 
application/x-tar tar 
application/x-tex tex 
application/zip zip 

audio/basic au、 snd 
audio/mid mid、rmi 
audio/mpeg mp3 
audio/x-aiff aif、aifc、aiff 
audio/x-pn-realaudio ra、ram 
audioX-wav WwWaV 
image/bmp bmp 

image/gif gif 

image/jpeg Jpe、 jpeg、 jpg 
image/tiff tif、 tiff 
text/css Css 

text/html htm、 html、stm 
text/plain bas、c、h、txt 
mp2、mpa、mpe、mpeg、 
Video/mpeg i 
Video/quicktime mov、 qt 


Video/x-ms-asf 


asf、asx、asr 


Video/x-msvideo 


avl 


Video/x-sgi-movie 
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1.2.4 Web 服务 器 


Web 服务 器 (Web Server) 也 称 为 WWW 服务 器 , 主要 功能 是 提供 网 上 信息 浏览 服务 。 
Web 服务 器 的 应 用 层 使 用 HITP 协议 ,信息 内 容 采 用 HIML 文档 格式 ,信息 定位 使 用 URL。 

当 Web 服务 器 接收 到 一 个 HTTP 请 求 (Request) 时 会 返回 一 个 HITP 响应 (Response)。 
Web 服务 器 处 理 客户 端 请 求 有 两 种 方式 : 一 是 静态 请 求 ， 客 户 端 所 需 请 求 的 页 面 不 需要 进 
行 任何 处 理 ， 直 接 作为 HITP 响应 返回 ， 二 是 动态 请 求 ， 客 户 端 所 需 请 求 的 页 面 需 要 在 服 
务 器 端 委托 给 一 些 服务 器 端 程 序 进 行 处 理 ， 例 如 CGI、JSP、ASP 等 ， 然 后 将 处 理 结果 形 
成 的 页 面 作为 HTTP 响应 返回 。 静 态 请 求 的 页 面 称 为 静态 网 页 ， 动 态 请 求 的 页 面 称 为 动态 
网 页 。 

搭建 一 个 Web 服务 器 需要 有 一 台 安 装 网 络 操作 系统 的 计算 机 ， 在 系统 上 安装 Web 服 
务 器 软件 ， 并 将 网 站 的 内 容 存储 在 服务 器 上 。 

@ Web 服务 器 选择 原则 

首先 是 响应 能 力 ， 即 Web 服务 器 对 多 个 用 户 浏览 信息 的 响应 速度 ， 响 应 速度 越 快 ， 单 
位 时 间 内 可 以 支持 越 多 的 访问 量 ; 其 次 是 与 后 端 服务 器 的 集成 ，Web 服务 器 除 直接 向 用 户 
提供 Web 信息 外 ， 还 肩负 服务 器 集成 的 任务 ;第 三 是 管理 的 难 易 程度 ， 一 是 管理 Web 服 
务 器 是 否 简单 易 行 ， 二 是 是 否 利用 Web 界面 进行 管理 ; 第 四 是 系统 的 稳定 可 靠 性 ，Web 服 
务 器 的 性 能 和 运行 都 需要 非常 稳定 ; 最 后 是 安全 性 , 既 要 防止 Web 服务 器 的 机 密 信 息 泄密 ， 
又 要 防止 黑客 的 攻击 。 

@ 常用 Web 服务 器 

1) Microsoft IIS 

Microsoft 的 Web 服务 器 软件 Intemet Information Server (IIS) 可 以 建立 在 公共 Intranet 
或 Internet 上 发 布 信息 的 Web 服务 器 ，IIS 是 流行 的 Web 服务 器 产品 之 一 ， 很 多 著名 的 网 
站 都 是 建立 在 IS 的 平台 上 

2) Apache 

Apache 是 世界 上 使 用 最 多 的 Web 服务 器 ， 它 的 成 功 之 处 主要 在 于 它 的 源 代码 开放 、 
支持 跨 平台 应 用 (可 以 运行 在 几乎 所 有 的 UNIX、Windows、Linux 系统 平台 上 ) 以 及 可 移 
植 性 等 方面 。 

3) Tomcat 

Tomcat 是 基于 Java 的 Web 服务 器 应 用 软件 ， 是 在 Apache 许可 证 下 开发 的 自由 软件 。 


1.3” 超 文本 与 标记 语言 


超 文 本 (Hypertext) 又 叫 超 媒体 (Hypermedia)， 是 一 种 将 各 种 信息 节点 连接 在 一 起 的 
网 状 逻辑 结构 。 标 记 语 言 (Markup Language，ML) 也 称 置 标语 言 ， 是 一 套 标识 文档 内 容 、 
结构 和 格式 的 语法 规则 。 


9 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


1.3.1 超 文 本 与 超 媒体 


传统 的 资料 〈 图 书 、 文 章 和 文件 等 ) 所 采用 的 都 是 〈 层 次 型 ) 线性 的 顺序 结构 〈 例 如 
水 游 书 籍 )， 而 真实 世界 中 的 实际 信息 则 是 非 线 性 网 状 结构 〈 例 如 水 浒 的 故事 情节 和 人 物 
关系 )。 

人 类 的 思维 方式 是 联想 型 的 ， 是 一 种 互联 的 交叉 网 络 ， 具 有 典型 的 非 线性 网 状 结 构 。 
例如 夏天 一 游泳 一 河 一 鱼 一 吃饭 一 餐具 一 银 器 一 耳环 一 婚纱 一 雪 一 冬天 一 冷 一 太阳 一 太空 
一 飞船 一 卫星 一 电视 转播 一 足球 赛 一 …… 

万 事 万 物 皆 互 相关 联 ， 人 的 大 脑 也 为 网 状 结构 ， 具 有 网 状 罗 辑 结构 的 超 文本 非常 符合 
人 类 的 联想 型 思维 方式 。 那 么 什么 是 超 文本 呢 ? 

超 文本 〈Hypertext) 是 由 信息 节点 和 表示 节点 之 间 相 互 关 系 的 链 所 组 成 的 具有 一 定好 
辑 结构 的 语义 网 络 。 超 文本 有 节点 、 链 和 网 络 3 种 组 成 要 素 ， 其 中 关键 的 是 连接 各 个 节点 
的 链 。 图 1.5 所 示 的 是 一 个 具有 6 个 节点 和 9 条 链 的 超 文本 结构 。 


图 1.5 超 文本 网 状 结构 


节点 Node) 是 指 基本 信息 块 〈 例 如 段 、 帧 、 卷 、 文 件 等 )， 它 们 在 不 同系 统 中 有 不 
同 的 名 称 ， 例 如 卡 〈Card)、 页 (Page)、 帧 (Frame) 和 片 (Pad) 等 。 

链 (Link) 是 指 节点 之 间 的 关联 (指针 )。 链 是 固定 节点 间 的 信息 联系 ， 用 来 以 某 种 形 
式 连 接 相 应 的 节点 ， 链 是 超 文本 的 。 链 在 形式 上 是 从 一 个 节点 指向 另 一 节点 的 指针 ， 但 在 
本 质 上 则 表示 不 同 节点 之 间 的 信息 联系 。 链 定义 了 超 文本 的 结构 ， 提 供 浏览 和 探索 节点 的 
能 力 。 

网 络 (Network) 是 由 链 连 接 在 一 起 的 节点 所 组 成 的 网 状 结构 。 

如 果 超 文本 中 的 节点 内 容 不 仅 包含 文本 ,而且 还 包含 各 种 媒体 对 象 ( 例 如 图 形 、 图 像 、 
声音 、 动 画 和 视频 等 )， 则 称 其 为 超 媒 体 (Hypermedia)， 即 超 媒 体 = 超 文本 + 多 媒体 。 


1.3.2 标记 语言 


与 自然 语言 和 编程 语言 不 同 ， 标 记 语 言 是 一 种 基于 文本 的 描述 性 语言 。 
标记 (Markup) 是 为 了 传达 有 关 文 档 的 信息 而 添加 到 文档 数据 中 的 文本 ， 原 本 是 在 图 
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书 和 报刊 等 排版 时 对 手稿 和 清 样 中 的 字体 和 格式 等 的 标注 ， 后 来 用 于 描述 文档 格式 和 结构 
化 数据 的 文本 标记 。 标 记 可 以 分 为 说 明 性 标记 (这 里 是 什么 ) 和 过 程 性 标记 (在 这 里 做 
什么 )。 
说 明 性 标记 是 以 一 种 非特 定 的 方式 来 描述 文档 的 结构 和 其 他 属性 的 标记 ， 它 独立 于 可 
能 对 文档 进行 的 任何 处 理 。 例 如 ， 为 了 表示 重要 或 强调 ， 可 以 在 显示 界面 上 使 用 粗 体 或 下 
画 线 进行 图 示 ， 但 是 在 计算 机 内 部 ， 则 需要 使 用 特殊 的 符号 体系 来 表示 ， 参 见 表 1.7。 
表 1.7 图 示 和 标记 


图 示 (人 看 ) 标记 (机 器 识别 ) 
粗 体 <b> 粗 体 </b> 
下 画 线 <u> 下 画 线 </u> 


标记 语言 (Markup Language，ML) 是 一 种 用 文本 标记 描述 结构 化 数据 ， 并 具有 严格 
语法 规则 的 形式 语言 。 

标记 语言 可 用 于 描述 数据 ， 如 定义 文本 格式 与 处 理 、 数 据 库 字 段 的 含义 与 关系 和 多 媒 
体 数 据 源 等 。 例如 在 HIML 中 表示 上 标 用 x<sup>2</sup>, 其 中 <sup></sup> 就 是 标记 语言 。 

现代 标记 语言 的 始祖 是 1986 年 ISO 推出 的 SGML (标准 通用 化 标记 语言 )， 它 是 一 种 
功能 完备 且 定 义 性 较 强 的 元 语言 , 受到 政府 、 公 司 和 出 版 界 的 欢迎 ， 


但 是 因为 其 过 于 复杂 且 系 统 难 实现 ， 使 得 对 其 的 推广 和 使 用 受到 了 SGML 

很 大 的 限制 。 HTML XxML 
Tim Bemers-Lee 将 SGML 加 以 应 用 和 简化 , 创建 了 用 来 描述 网 el | 

页 文档 的 HTML ( 超 文本 标记 语言 )， 获 得 了 巨大 的 成 功 。 现 在 使 XHTM 

用 的 主要 标记 语言 如 图 1.6 所 示 。 
@ scvL 图 1.6 主要 标记 语言 


SGML (Standard Generalized Markup Language， 标 准 通用 化 标记 语言 ) 是 现代 标记 语 
言 的 始祖 ， 现 在 流行 的 标记 语言 都 是 它 的 应 用 或 其 派生 语言 (的 应 用 )。SGML 的 文件 组 
成 如 图 1.7 所 示 。 


SGML 声明 


| 


图 1.7 标记 语言 的 文件 组 成 


SGML 声明 说 明了 DTD 和 文件 实例 所 使 用 的 语法 (字符 集 、 定 界 符 、 命 名 规则 、 名 
字 字 符 和 数量 特征 等 )。DTD (Document Type Definition， 文档 类 型 定义 ) 定义 了 文件 中 的 
元 素 类 型 及 其 关系 结构 。 文 件 实例 由 数据 内 容 和 描述 其 结构 的 标记 所 组 成 。 

@ HTML 

HTML (Hypertext Markup Language， 超 文本 标记 语言 ) 是 Web 上 的 通用 标记 语言 ， 
是 书写 Web 文档 的 一 套 语 法 规范 ， 用 HIML 语言 写成 的 文件 称 为 网 页 或 页 面 。HTML 的 
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主要 版 本 如 下 : 

HTML2.0 是 于 1996 年 由 IETF 的 HTML 工作 组 开发 的 。 

HTML3.2 作为 W3C 标准 发 布 于 1997 年 1 月 14 日 。 

HTML4.0 作为 W3C 推荐 标准 发 布 于 1997 年 12 月 18 日 。HTML4.0 最 重要 的 特性 是 
引入 了 样式 表 (CSS)。 

HTML4.01 发 布 于 1999 年 12 月 24 日 。 

HTMLS5 作为 W3C 标准 发 布 于 2014 年 10 月 28 日 HTML5 是 W3C 与 WHATWG 合 
作 的 结果 ，HTMLS5 是 构建 开放 Web 平台 的 核心 。 在 这 一 版 本 中 增加 了 支持 Web 应 用 开发 
者 的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 
准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 浏览 器 中 的 互 操作 性 。 

HTML5.1 作为 W3C 推荐 标准 于 2016 年 11 月 1 日 发 布 。 

HTML5.2 作为 W3C 推荐 标准 于 2017 年 12 月 14 日 发 布 。 

©@ XML 

XML (eXtensible Markup Language， 可 扩展 标记 语言 ) 是 W3C 于 1998 年 发 布 的 一 种 
用 于 数据 描述 的 元 标记 语言 的 国际 标准 。 由 于 HTML 内 容 与 表现 不 分 的 先天 性 不 足 和 后 期 
发 展 造成 的 不 兼容 ， 使 得 网 页 文档 的 设计 与 维护 变 得 很 困难 ， 所 以 W3C 推出 XML 想 代 替 
HITML， 但 由 于 HIMLS 的 发 布 和 广泛 支持 ，XML 发 展 到 今天 并 没有 代替 HTML。 

XML 现在 主要 用 来 描述 数据 , 虽然 与 传统 二 进 制 格式 相 比 会 牺牲 一 些 处 理 效率 和 存储 
空间 ， 但 是 换 来 的 却 是 数据 的 通用 性 、 可 交换 性 和 可 维护 性 ， 这 对 跨 平 台 的 分 布 式 网 络 环 
境 中 的 计算 机 应 用 至 关 重 要 ， 所 以 XML 被 设计 用 来 描述 、 存 储 、 传 送 及 交换 数据 。 

@ XHTML 

W3C 想 用 XML 来 代替 HIML, 但 这 一 过 程 漫长 且 不 可 确定 ,于 是 推出 过 渡 的 XHTML 
(eXtensible Hypertext Markup Language， 可 扩展 超 文本 标记 语言 )。XHTML 是 一 项 可 从 
HIML4.01 平稳 迁移 的 XML 应 用 ， 也 就 是 说 按照 XML 语法 规范 重 写 了 HIML，XHTML 
是 符合 XML 的 HTML 。 


1.4 Web 标准 


Web 标准 (Web Standards) 是 由 W3C 等 标准 化 组 织 共同 制定 的 一 些 规范 集合 ，Web 
标准 不 是 一 个 标准 ， 而 是 一 系列 标准 。 网 页 由 结构 (Strmucture， 网 页 的 内 容 )、 表 现 
(Presentation， 网 页 的 外 观 ) 和 行为 《Behavior， 网 页 的 交互 ) 3 部 分 组 成 ， 对 应 的 标准 分 
为 结构 标准 、 表 现 标 准 和 行为 标准 。 结 构 标 准 主要 包括 HTML 和 XML， 用 来 结构 化 网 页 
和 内 容 ， 表现 标准 主要 包括 CSS，CSS 是 一 种 样式 规则 语言 ， 将 样式 应 用 于 网 页 内 容 ; 行 
为 标准 主要 包括 ECMAScript 和 对 象 模型 (DOM)， 以 及 基于 此 的 JavaScript，JavaScript 
是 一 种 脚本 编程 语言 ， 允 许 用 户 控 制 和 操作 网 页 的 内 容 。 

W3C 对 标准 有 一 套 完整 的 审批 流程 ， 从 工作 草案 (Working Draft，WD) 到 候选 推荐 
标准 (Candidate Recommendation，CR)， 再 到 提议 推荐 标准 (Proposed Recommendation， 
PR)， 几 年 之 后 才能 成 为 W3C 推荐 标准 (REC)。 


1 杷 
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1.4.1 Web 标准 体系 


@ 结构 标准 

HTML 推荐 2014 年 10 月 28 日 W3C 发 布 的 HTML5。XML 目前 推荐 遵循 的 是 W3C 
于 2002 年 10 月 15 日 发 布 的 XML1.1。 

@ 表现 标准 

CSS (Cascading Style Sheets， 层 车 样式 表 ) 是 用 来 呈现 网 页 外 观 样式 的 一 组 规范 ， 
W3C 目前 的 建议 是 CSS2.1 和 CSS3 。 

CSS3 是 在 CSS2.1 的 基础 上 按 模块 构建 的 ， 每 个 模块 都 会 增加 功能 或 者 替换 CSS2.1 
已 有 的 部 分 。 目 前 ，CSS3 规范 仍 在 开发 ， 正 不 断 推出 各 个 模块 的 草案 版 ， 但 由 于 HIML5 
的 推出 和 主要 浏览 器 越 来 越 支 持 CSS3， 建 议 大 家 使 用 CSS3。 

@ 行为 标准 

1) ECMAScript 

ECMAScript 是 ECMA 制定 的 标准 脚本 语言 。 

ECMAScript 3.0 于 1999 年 12 月 发 布 。 

ECMAScript 5.0 于 2009 年 12 月 发 布 。 

ECMAScript 6.0 (ECMAScript 2015) 于 2015 年 6 月 发 布 。 

ECMAScript 8.0 (ECMAScript 2017) 于 2017 年 6 月 发 布 。 

ECMAScript 3.0 在 业界 得 到 广泛 支持 ， 成 为 通行 标准 ， 葛 定 了 JavaScript 语言 的 基本 
语法 ， 以 后 的 版 本 完全 继承 ， 建 议 初学 者 使 用 。 

2) DOM 

DOM (Document Object Model， 文 档 对 象 模型 ) 是 W3C 组 织 推荐 的 处 理 可 扩展 标记 
语言 的 标准 编程 接口 ， 作 为 一 项 W3C 推荐 标准 , DOM Level 2 Core 规范 发 布 于 2000 年 11 
月 13 日 ，DOM Level 3 Core 规范 发 布 于 2004 年 4 月 7 日 ，DOM 是 浏览 器 、 平 台 和 语言 
的 接口 。 

Web 推荐 标准 如 图 1.8 所 示 。 


HTML Es 


图 1.8 ”Web 推荐 标准 


基于 Web 标准 的 网 页 设计 要 将 网 页 的 结 告 构 、 表 现 、 行 为 这 三 个 组 成 部 Eb hn 
分 严格 分 离 ， 这 3 个 组 成 部 分 按照 标准 分 层次 建立 在 彼此 之 上 。 
加 11 Web standards example html， 说 明 网 页 的 结构 、 表 现 、 行 为 这 


3 个 部 分 的 作用 和 关系 。 


国 中 主 入 浊 
视频 讲解 
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首先 建立 Web standards example.html 网 页 文件 ， 用 HTML 标记 语言 标记 网 页 的 内 容 ， 
网 页 内 容 只 有 一 个 普通 按钮 ， 显 示 效 果 如 图 1.9 所 示 。 源 代码 如 下 : 


<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
<meta charset="UTF-8"> 
<title>Web 标准 结构 </title> 
<link href="css/style.css" rel="stylesheet" type="text/css"> 
<script src="js/javascript.js"></script> 
</head> 
<body> 
<button> 用 鼠标 单 击 </button> 
</body> 
</html> 


接着 在 css 目录 下 建立 style.css 样式 文件 ， 加 上 一 点 CSS 样式 使 按钮 看 起 来 更 美观 。 
源 代码 如 下 : 


button { 
font-family: "微软 雅 黑 "，"sans-serif"; 
color: rgbat(t0r On 200, 0-56) 
font-size: 1.2rem; 
width: 200px; 
border: lpx solid rgba(0, 0, 200, 0.6); 
border-radius: 5px; 
box-shadow: 2px 2px rgba(0, 0, 200, 0.4); 
} 


在 Web standards example.html 文件 中 通过 <link> 标 记 建立 和 style.css 文件 的 关联 ， 样 
式 效果 如 图 1.9 所 示 。 


<link href="css/style.css" rel="stylesheet" type="text/css"> 


最 后 在 js 目录 下 建立 javascriptjs 脚本 文件 , 实现 动态 行为 操作 ， 当 单 击 按钮 时 在 按钮 
的 下 面 增加 一 个 新 的 段落 ， 段 落 的 内 容 文 本 是 “Hello World!”。 源 代码 如 下 : 


window.onload=function (){ 

/* 获 取 页 面 上 的 按钮 */ 
Var button=document .querySelector('button'); 
/* 为 按钮 添加 一 个 单 击 事件 监听 器 ， 当 按 下 按钮 时 将 运行 createParagraph () 函数 */ 
button.addEventListener('click',createParagraph); 
/*createParagraph () 函数 创建 一 个 新 段落 并 将 其 附加 到 body 的 底部 */ 
function createParagraph(){ 

Var oSs=document .styleSheets[0]; 

Var para=document .querySelector('p'); 

if (para==null){ 

Para=document .createElement ('p'); 


第 1 章 Web 技术 概述 01 


para.textContent="Hello World!"; 
document .body.appendCchild (para); 
osSs.addRule('p','color:rgba(0, 0, 200, 0.6);font-size:1.2rem'); 


} 


在 Web standards example.html 文件 中 通过 <scrip 亿 标记 使 用 脚本 文件 ， 执 行 效果 如 
图 1.9 所 示 。 


<script src="js/javascript.js"></script> 


用 鼠标 单 击 
用 鼠标 单 击 用 鼠标 单 击 ] Hello World! 


图 1.9 ”Web standards example.html 效果 图 


1.4.2 采用 Web 标准 的 优势 


基于 Web 标准 建立 网 站 对 网 站 和 访问 者 都 具有 优势 。 

对 于 访问 者 来 说 ， 主 要 有 可 确保 每 个 人 都 有 权利 访问 相同 的 信息 ; 文件 下 载 与 页 面 显 
示 速 度 更 快 ， 内 容 能 被 更 多 的 用 户 所 访问 (包括 失明 、 视 弱 和 色盲 等 残障 人 士 )， 内容 能 被 
更 广泛 的 设备 所 访问 (包括 屏幕 阅读 机 、 手 持 设备 、 搜 索 机 器 人 、 打 印 机 和 电 冰 箱 等 ); 用 
户 能 够 通过 样式 选择 定制 自己 的 表现 界面 ， 所 有 页 面 都 能 提供 适 于 打印 的 版 本 。 

对 于 网 站 所 有 者 来 说 ， 主 要 有 使 站 点 开发 更 快捷 ， 更 令 人 愉快 ， 更 少 的 代码 和 组 件 ， 
容易 维护 ; 带宽 要 求 降低 (代码 更 简洁 ), 成 本 降低 ; 更 容易 被 搜寻 引擎 搜索 到 ; 改版 方便 ， 
不 需要 变动 页 面 内 容 ， 提 供 打印 版 本 且 不 需要 复制 内 容 ， 提 高 网 站 易 用 性 。 


1.5 浏览 器 


浏览 器 是 Web 服务 的 客户 端 程序 ， 可 向 Web 服务 器 发 送 各 种 请 求 ， 并 对 从 服务 器 发 
来 的 网 页 和 各 种 多 媒体 数据 格式 进行 解释 、 显 示 和 播放 。 浏 览 器 的 主要 功能 是 解析 网 页 文 
件 内 容 并 正确 显示 ， 网 页 一 般 是 HTML 格式 ， 浏 览 器 是 经 常 使 用 的 客户 端 程序 。 


1.5.1 浏览 器 的 发 展 史 


1990 年 Tim Berners-Lee 设计 了 世界 上 第 一 个 浏览 器 World Wide Web，1991 年 3 月 在 
CERN 使 用 ， 改 名 为 Nexus。 
1993 年 3 月 美国 国家 超级 计算 机 应 用 中 心 (NCSA, 位 于 伊利 诺 大 学 厄 巴 纳 -香槟 分 校 ) 
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发 布 Mosaic， 这 是 互联 网 历史 上 第 一 个 获得 普遍 使 用 和 能 够 显示 图 形 的 浏览 器 。 

1994 年 Marc Andreessen 带领 开发 Mosaic 的 主要 人 员 成 立 了 Netscape( 网 景 ) 公司 ， 
发 布 了 第 一 款 商业 浏览 器 Netscape Navigator。 

1995 年 8 月 微软 公司 发 布 了 正 。 

1996 年 挪威 最 大 的 通信 公司 Telenor 推出 了 Opera。Opera 有 自己 的 内 核 ， 完 全 独立 于 
Mosaic、 IE、Netscape。 

2003 年 1 月 苹果 公司 在 Macworld 大 会 上 发 布 了 Safari。 

2004 年 11 月 Mozilla 发 布 Firefox，Firefox 最 开始 的 名 字 是 Phoenix( 火 鸟 )， 后 来 
版 权 问 题 更 名 为 Firefox (火狐 );，2005 年 Mozilla 宣布 将 Firefox 开源 。 

2008 年 9 月 谷歌 公司 发 布 Chrome 浏览 器 ， 它 目前 是 市 场 占有 率 第 一 的 浏览 器 。 

2015 年 4 月 微软 公司 发 布 Edge 浏览 器 。 


1.5.2 浏览 器 的 内 核 


内 核 是 浏览 器 底层 使 用 的 技术 ， 它 决定 浏览 器 的 功能 和 性 能 ， 目 前 市 场 上 的 浏览 器 主 
要 采用 下 列 内 核 。 

。 Trident (三 叉 载 ): 正 使 用 ， 在 下 7 中 微软 对 Trident 的 排版 引擎 做 了 重大 的 变动 ， 
增加 了 对 Web 标准 的 支持 。 
。 Gecko (壁虎 ): Gecko 是 用 C++ 编写 并 开放 源 代 码 ， 由 网 景 公司 开发 ， 现 由 Mozilla 
车 金 会 维护 , 目前 被 Mozilla 家 族 浏 览 器 以 及 Netscape 6 以 后 版 本 的 浏览 器 和 Firefox 
所 使 用 。 
。 WebKit: 苹果 Safari 浏览 器 使 用 的 内 核 , WebKit 包含 WebCore 排版 及 JavaScriptCore 
解析 , 均 是 从 KDE( 运 行 于 Linux、UNIX 等 操作 系统 上 的 图 形 桌 面 环 境 ) 的 KHTML 
(由 KDE 开发 的 浏览 器 内 核 ) 衍生 而 来 。Chrome 最 开始 也 使 用 WebKit 作为 内 核 。 
Blink: 由 Google 和 Opera 开发 的 浏览 器 内 核 ， 源 自 WebKit 中 WebCore 的 一 个 分 
支 ， 在 Chrome (28 及 以 后 的 版 本 )、Opera (15 及 以 后 的 版 本 ) 浏览 器 中 使 用 。 
Presto: Operal2.17 及 更 早 版 本 曾经 采用 的 内 核 ， 现 已 停止 开发 并 废弃 ， 该 内 核 在 
2003 年 的 Opera7 中 被 首次 使 用 。 


1.5.3 ”常用 浏览 用 


@ Internet Explorer 

微软 的 Internet Explorer (IE) 是 最 流行 的 浏览 器 ， 发 布 于 1995 年 ，IE 使 用 Trident 内 
核 。2015 年 4 月， 微软 发 布 内 置 于 Windows 10 中 的 新 浏览 器 Edge。 

©@ Firefox 

Firefox (FF ) 是 由 Mozilla (Mozilla 基金 会 简称 Mozilla, 是 为 支持 和 领导 开源 的 Mozilla 
项 目 而 设立 的 一 个 非 营利 组 织 ) 发 展 而 来 的 浏览 器 , 发 布 于 2004 年 , 已 成 为 流行 的 浏览 器 。 
Firefox 使 用 Gecko 内 核 。 

@ opera 

Opera 是 挪威 人 发 明 的 浏览 器 , 快速 小 巧 , 符合 工业 标准 , 适用 于 多 种 操作 系统 。Opera 
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使 用 Blink 内 核 。 

@ Chrome 

Chrome 是 免费 的 开源 Web 浏览 器 ， 由 Google 开发 ， 该 浏览 器 于 2008 年 9 月 发 布 。 
最 开始 Chrome 使 用 WebKit 内 核 ， 现 在 Google 开始 转向 Blink 内 核 。 

5】 Safari 

Safari 是 由 苹果 公司 开发 的 浏览 器 ， 适 用 于 Mac 和 Windows 系统 ， 该 浏览 器 于 2003 
年 6 月 发 布 。Safari 使 用 WebKit 内 核 。 

这 些 常用 浏览 器 的 图 标 如 图 1.10 所 示 。 


Ee@O 


图 1.10 正 、Edge、Firefox、Opera、Chrome 和 Safari 图 标 


浏览 器 的 市 场 占有 率 可 参考 “http://gs.statcounter.com” 的 全 球 浏览 器 使 用 情况 统计 ， 
如 图 1.11 所 示 。 


S statcounter 
GlobalStats PressReleases FAQ About Fecdback 


Chrome Safari UC Browser Firefox Opera 


57.46% 14.39% 7.91% BS 3.69% 3.06% 


Browser Market Share Worldwide - February 2018 


图 1.11 全 球 浏览 器 市 场 份额 示意 图 


1.5.4 标准 浏览 曙 


@ 标准 浏览 器 概述 

标准 浏览 器 泛 指 对 Web 标准 规范 提供 支持 并 能 完美 呈现 的 浏览 器 ， 更 严格 的 是 指 对 
Web 标准 完全 支持 的 浏览 器 ， 目 前 也 指 对 HIML5 和 CSS3 提供 更 好 支持 的 浏览 器 。 最 新 
版 本 的 Safari、Chrome、 i 以 及 Opera 支持 大 部 分 HIMLS 特性 。IE 自 IE9 开始 支持 
某 些 HTMLS5 特性 。 

四 测试 判断 

Acid3 由 网 页 标准 计划 小 组 (Web Standards Project，WSP) 设计 ， 对 浏览 器 与 Web 标 
准 的 相 容 性 进行 测试 ， 是 目前 Web 标准 基准 测试 中 最 严格 的 一 个 ，Acid3 提供 全 面 严格 的 
100 项 规范 测试 , 测试 集中 在 ECMAScript、 DOM Level 3、Media Queries、CSS 和 SVG 等 。 
用 浏览 器 加 载 Acid3 测试 页 (http://acid3.acidtests.org/)， 运 行 100 项 测试 ， 页 面 会 不 断 加 
载 功 能 ， 直 接 给 予 分 数 ， 满 分 为 100 分 ， 如 图 1.12 所 示 。 
用 户 可 以 用 “http://html5test.com/” 测 试 衡量 浏览 器 对 HIMLS 标准 的 支持 情况 ， 分 数 
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越 高 越 好 ， 如 图 1.13 所 示 。 
EE EST 


YOUR BROWSER SCORES 0 1 1 QUT OF 555 POINTS Bo 


Chck here for GolS 


You ae vsng Cnrone 47 on wingows FP 


图 1.12 Acid3 测试 参考 图 图 1.13 ”html5test 测试 参考 图 


通过 “http://caniuse.com” 网 站 ， 输 入 HTMLS5 标签 或 CSS3 属性 就 可 以 知道 主要 浏览 
器 对 特定 HTML5 和 CSS3 的 支持 程度 ， 如 图 1.14 所 示 。 


[GES = [ele> iEiele | 


CSS3 Box-shadow -cr 


Ee fof ol vsers 
Global 95.4E% + 0.01% = 95.47% 

Method of displaying an inner or ourer shadow effect to elements Unprafoed: 95.37% 
China B80.79% + 0.01% = 80.79% 

unprefived: 80.75% 


Curentalercd 基站 和 下 全 


R * Chromefor UCBrowserfor Samsung 
Firefox Chrome Safari iDS Safari Opera Mini Androld Anddld We QQ Browser 


Netes ，Knownlssues (3) Resources(5) Feedback 


Can be partially emulated In older IE versions using the non-standard "shadow fiter. 
图 1.14 ”caniuse.com 网 站 示意 图 


Mozilla 开发 了 一 款 权威 的 专注 于 实际 问题 解决 的 JavaScript 测试 软件 JetStream 
(https://webkit.org/perf/sunspider/sunspider.html)， 可 以 进行 JavaScript 基准 测试 ， 分 数 越 高 
越 好 。 


1.6 ”Web 开发 工具 


一 个 好 的 工具 可 以 让 开发 效率 提高 和 让 开发 难度 降低 ，Web 开发 不 意味 着 一 定 要 手写 
代码 ， 但 最 好 能 从 手写 代码 开始 ， 通 过 手写 代码 可 以 接触 到 更 多 有 用 的 实际 内 容 。 其 实 ， 
在 工具 的 帮助 下 手写 代码 也 不 是 件 难事 ， 难 的 只 是 很 多 人 不 愿意 尝试 它 。 
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第 1 章 Web 技术 概述 
1.6.1 JetBrains WebStorm 


WebStorm 是 JetBrains 公司 旗下 的 一 款 Web 开发 工具 ， 被 广大 开发 者 誉 为 “Web 前 端 
开发 神器 ”“ 最 强大 的 HIMLS 编辑 器 ”“ 最 智能 的 JavaScript IDE”， 与 mntelliJIDEA 同 源 ， 
继承 了 IntelliJ IDEA 强大 的 JS 部 分 的 功能 。 其 主要 特点 有 对 业界 最 新 技术 的 支持 、 可 自 定 
义 代 码 格式 化 规则 、 智 能 的 代码 补 全 、html 提示 、 联 想 查 询 、 代 码 重 构 、 代 码 检查 和 快速 
修复 、 代 码 调试 、 代 码 结构 浏览 、 代 码 折 历 、 包 看 或 者 去 掉 外 围 代码 等 。 


1.6.2 ”测试 和 调试 环境 


网 站 的 测试 及 调试 建议 用 Chrome 浏览 器 提供 的 开发 者 工具 进行 ,可 以 从 “http:/www- 
google.cn/chrome/browser/desktop/ ”下载 并 进行 安装 。 

打开 浏览 器 后 直接 在 页 面 上 单 击 鼠标 右键 ， 然 后 在 快捷 菜单 中 选择 【检查 】 命 令 , 或 
者 直接 按 F12 键 ， 或 者 按 快捷 方式 键 Ctrl+ShiftI， 进 入 开发 者 工具 界面 ， 如 图 1.15 所 示 。 


RQR0Oie 


Network Timebine Proflet Resources Audi i 


emulation Rendering 


了 
a 
© “topfame> v Peevelog 


图 1.15 Chrome 开发 者 工具 界面 


Chrome 开发 者 工具 分 为 八大 模块 ， 下 面 介绍 每 个 模块 的 主要 功能 。 

。 Elements: 用 于 查看 和 编辑 当前 页 面 中 的 HTML 和 CSS 元 素 。 

。 Network: 用 于 查看 HTTP 请 求 的 详细 信息 ， 例 如 请 求 头 、 响 应 头 及 返回 内 容 等 。 
。 Sources: 用 于 查看 和 调试 当前 页 面 所 加 载 的 脚本 源 文件 。 
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。 Timeline: 用 于 查看 脚本 的 执行 时 间 、 页 面 元 素 泻 染 时 间 等 信息 。 

。 Profiles: 用 于 查看 CPU 执行 时 间 与 内 存 占用 等 信息 。 

。 Resources: 用 于 查看 当前 页 面 所 请 求 的 资源 文件 ， 例 如 HTML、CSS 样式 文件 等 。 
。 Audits: 用 于 优化 前 端 页 面 、 加 速 网 页 加 载 速度 等 。 

。 Console: 用 于 显示 脚本 中 所 输出 的 调试 信息 ， 或 运行 测试 脚本 等 。 


1.7 ”小结 
本 章 简要 介绍 了 Intemet 基础 知识 ， 从 应 用 的 角度 介绍 了 Web 体系 结构 和 相关 概念 ， 
并 介绍 了 超 文 本 与 标记 语言 的 相关 知识 ， 了 解 了 Web 标准 的 组 成 和 常用 浏览 器 。 


1.8 习题 


@ 选择 是 
(1) Web 使 用 (  ) 在 服务 器 和 客户 端 之 间 传 输 数 据 。 

A. FIP B. Telnet C. E-mail D. HITP 
(2) HTTP 服务 默认 的 端口 号 是 ( )。 

A. 20 B. 21 EC 加 D. 80 


(3) HTML 是 一 种 标记 语言 ， 由 ) 解释 执行 。 
A. Web 服务 器 ”B. 操作 系统 C. Web 浏览 器 ”D. 不 需要 解释 
(4) 目前 的 Web 标准 不 包括 和 
A. 结构 标准 B. 表现 标准 C. 行为 标准 D. 动态 网 页 
(5) 下 面 正确 的 URL 地 址 是 )。 
A. Get://www.solt.com/about.html 
B. ftp:/ftp.tsinghua.edu.cn 
C. http://www.tsinghua.edu.cn 
D. http:www.bhu.edu.cn 
四 简 答题 
(1) 解释 IP 地址 、URL、 域 名 的 含义 。 
(2) 基本 的 Web 技术 有 哪些 ? Web 的 工作 原理 是 什么 ? 
(3) 什么 是 超 文本 ? 常用 的 超 文本 标记 语言 有 哪些 ? 


(4) 一 个 网 页 由 哪 几 个 部 分 构成 ? 对 应 的 Web 标准 是 什么 ? 网 页 设计 为 什么 采 / 


Web 标准 ? 
(5) 什么 是 标准 浏览 器 ? 
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本 章 首先 介绍 HTML5 页 面 的 文档 结构 ， 然 后 介绍 HTML5 的 语法 ， 接 下 来 讨论 如 何 
使 用 WebStorm 工具 软件 建立 HTML5 页 面 ， 最 后 详细 介绍 HTMLS5 头 部 元 素 常 用 的 标签 。 

本 章 要 点 : 

她 HTML5 文档 结构 。 

如 HTML5 语法 规则 。 

他 头 部 元 素 常用 的 标签 。 


2.1 HTML5 基础 


HIMLS 文件 是 由 一 些 标签 语句 组 成 的 文本 文件 ， 标 签 标识 了 内 容 和 类 型 ，Web 浏览 
器 通过 解析 这 些 标签 进行 显示 。HIMLS 文件 可 以 使 用 任意 文本 编辑 器 创建 ， 但 文件 的 扩 
展 名 必须 使 用 “ htm” 或 “.html”， 建 议 使 用 “.html”， 以 适应 跨 平 台 的 需要 。 


2.1.1 HTML5 文档 结构 


一 个 HTML5 文档 的 基本 结构 如 表 2.1 所 示 。 


表 2.1 HTML5 文档 结构 表 
<!DOCTYPE html> 
<html> 


文档 类 型 声明 


<head> 
标题 元 素 


其 他 头 内 元 素 


<title> 页 面 标题 </title> 


HIMLS5 元 素 
<meta charset="utf-8"> 
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续 表 
文档 类 型 声明 <!DOCTYPE html> 
体 | <body> 
HTMLS 元 素 


相应 的 源 代码 如 下 : 


<!DOCTYPE html> 

<html] lang="zh-CN"> 
<head> 

<meta charset="utf-8"> 
<title> 页 面 标题 </title> 
</head> 

<body> 


</body> 

</html> 

在 HTML5 文档 中 ， 文 档 类 型 声明 <!IDOCTYPE> 是 强制 使 用 的 ， 总 是 位 于 首 行 ， 这 样 
浏览 器 才能 获知 文档 类 型 。<!DOCTYPE> 声 明 不 是 HIML 标签 ， 它 是 指示 Web 浏览 器 关 
于 页 面 使 用 哪个 HTML 版 本 进行 编写 的 指令 。 


2.1.2 元 素 与 标签 


元 素 是 标记 语言 的 基本 单元 ， 元 素 是 通过 使 用 HIMLS 标签 进行 定义 的 ， 元 素 可 以 用 
来 描述 文档 的 各 种 成 分 和 格式 。 

元 素 (element〉 指 文档 的 各 种 成 分 (例如 头 、 标 题 、 段 落 、 表 格 和 列表 等 )。 元 素 的 
类 型 、 属 性 和 范围 用 标签 来 标识 、 设 置 和 界定 。 

元 素 之 间 可 以 撕 套 《文档 形 成 树 状 结构 )， 但 不 能 交叉 。 堪 套 的 诸 元 素 构成 父子 关系 ， 
外 层 称 为 父 元素 ， 内 层 称 为 子 元 素 ， 多 级 嵌 套 则 形成 多 重 辈分 的 层次 等 级 关系 。 

标签 〈tag， 标 志 / 标 记 / 标 识 /标注 ) 是 用 来 描述 文档 内 容 的 类 型 、 组 成 与 格式 化 信息 的 
文本 字符 串 ， 用 一 对 尖 括 号 “<” 和 “>” 括 起 ， 位 于 起 始 标签 和 终止 标签 之 间 的 文本 是 元 
素 的 内 容 。 标 签 可 用 于 标识 元 素 的 类 型 ， 设 置 元 素 的 属性 ， 并 界定 元 素 内 容 的 始末 。 

例如 下 面 是 一 个 HTMLS5 元 素 : 

<b> 此 文本 是 粗 体 的 。</b> 


这 个 HIMLS 元 素 由 起 始 标签 “<b>” 开 始 ， 元 素 的 内 容 是 “此 文本 是 粗 体 的 。”， 元 素 
由 终止 标签 “</b>” 结 尾 。<b> 标 签 的 作用 是 定义 一 个 显示 为 粗 体 的 HTMLS5 元 素 。 
元 素 可 按 有 无 元 素 内 容 分 为 非 空 元 素 和 空 元 素 两 类 ， 对 应 的 标签 为 非 空 标签 和 空 


@ 非 空 元 素 与 标签 


非 空 元 素 指 含有 内 容 的 元 素 ， 非 空 标签 指标 识 非 空 元 素 的 标签 ， 有 开始 和 结束 两 个 标 
签 。 非 空 元 素 标签 语句 的 语法 如 下 : 

< 元 素 名 [属性 名 =" 属 性 值 "] …> 元 素 内 容 </ 元 素 名 > 
其 中 ,“< 元 素 名 [属性 名 =" 属 性 值 "] …>” 标 识 元 素 的 开始 ， 方 括号 内 为 可 选 内 容 ;“</ 元 
素 名 >” 标 识 元 素 的 结束 。 例 如 标题 和 超 链 接 元 素 。 


<title> 测 试 页 </title> 
<a href="http://www.tsinghua.edu.cn/"> 清 华 大 学 </a> 
@ 空 元 素 与 标签 


空 元 素 指 不 含 内 容 的 元 素 ， 空 标签 指标 识 空 元 素 的 标签 。 一 个 空 元 素 只 有 一 个 标签 。 
空 元 素 标签 语句 的 语法 如 下 : 

< 元 素 名 [属性 名 =" 属 性 值 "] … /> 

例如 图 像 、 换 行 和 水 平 线 元 素 。 


<img src="lena.gif" /> 
<br > 
<hr /> 


图 HTML5 参考 手册 
表 2.2 列 出 了 HIMLS 按 字母 顺序 排列 的 除了 不 赞成 使 用 元 素 以 外 的 其 他 元 素 。 
HTML5.2 版 本 手册 可 参阅 “https:/www.w3.org/TR/html5/”， 最 新 的 HTML5.3 版 本 手册 可 
以 参阅 W3C 在 GitHub 〈 一 个 开源 项 目 托管 平台 ) 上 的 文档 内 容 ， 链 接地 址 为 
“http://w3c.github.io/html/”。 
表 2.2 HTML5 元 素 表 


标签 描 述 
AE 定义 注释 
<!IDOCTYPE> 定义 文档 类 型 
<a> 定义 锚 
<abbr> 定义 缩写 
<acronym> 定义 只 取 首 字母 的 缩写 (HTML5 不 支持 
<address> 定义 文档 作者 或 拥有 者 的 联系 信息 
<area> 定义 图 像 映射 内 部 的 区 域 ， 空 元 素 
<article> 定义 文章 (HTML5 新 标签 ) 
<aside> 定义 页 面 内 容 之 外 的 内 容 (HIMLS 新 标签 ) 
<audio> 定义 声音 内 容 (HTML5 新 标签 ) 
<b> 定义 粗 体 字 
<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 ， 空 元 素 
<bdi> 定义 文本 的 方向 ， 使 其 脱离 它 周围 文本 的 方向 设置 (HTMLS 新 标签 
<bdo> 定义 文字 方向 
<big> 定义 大 号 文本 
<blockquote> 定义 长 的 引用 
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标 描 述 
<body> 定义 文档 的 主体 
<br> 定义 简单 的 折 行 ， 空 元 素 
<button> 定义 按钮 
<canvas> 定义 图 形 (HTML5 新 标签 ) 
<caption> 定义 表格 标题 
<cite> 定义 引用 
<code> 定义 计算 机 代码 文本 
<col> 定义 表格 中 一 个 或 多 个 列 的 属性 值 ， 空 元 素 
<colgroup> 定义 表格 中 供 格式 化 的 列 组 
<command> 定义 命令 按钮 (HTML5 新 标签 ) 
<datalist> 定义 下 拉 列 表 (HTML5 新 标签 ) 
<dd> 定义 列表 中 项 目的 描述 
<del> 定义 被 删除 文本 
<details> 定义 元 素 的 细节 (HTMLS5 新 标签 ) 
<div> 定义 文档 中 的 节 
<dfn> 定义 项 目 
<dialog> 定义 对 话 框 或 窗口 (HTML5 新 标签 ) 
<dl> 定义 列表 
<dt> 定义 列表 中 的 项 目 
<em> 定义 强调 文本 
<embed> L 或 插件 (HTML5 新 标签 ) 
<fieldset> 的 边框 
<figcaption> 的 标题 (HTMLS5 新 标签 ) 
<figure> 定义 媒介 内 容 的 分 组 以 及 它们 的 标题 (HIMLS 新 标签 ) 
<footer> 定义 section 或 page 的 页 脚 (HTML5 新 标签 ) 
<form> 定义 供用 户 输入 的 HIML 表单 
<frame> 定义 框架 集 的 窗口 或 框架 ， 空 元 素 
<frameset> 定义 框架 集 
<hl>~<h6> 义 HTML 标题 
<head> 定义 关于 文档 的 信息 
<header> 定义 section 或 page 的 页 眉 (HIMLS 新 标签 ) 
<hr> 定义 水 平 线 ， 空 元 素 
<html> 定义 HIML 文档 
<i> 定义 斜体 字 
<iframe> 定义 内 联 框 架 
<img> 定义 图 像 ， 空 元 素 
<input> 义 输入 控件 ， 空 
<ins> 定义 被 插入 文本 
<kbd> 定义 键盘 文本 
<keygen> 定义 生成 密 钥 (HTML5 新 标签 )， 元 素 已 经 过 时 
<label> 定义 input 元 素 的 标注 
<legend> 定义 fieldset 元 素 的 标题 
<li> 定义 列表 的 项 目 
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标 签 描 述 
<link> 定义 文档 与 外 部 资源 的 关系 ， 空 元 素 
<main> 定义 文档 的 主要 内 容 (HTML5.2 新 标签 ) 
<map> 定义 图 像 映射 
<mark> 定义 有 记号 的 文本 HTMLS5 新 标签 ) 
<menu> 定义 命令 的 列表 或 菜单 
<menuitem> 定义 用 户 可 以 从 弹出 菜单 调用 的 命令 /菜单 项 目 
<meta> 定义 关于 HTML 文档 的 元 信息 ， 空 元 素 
<meter> 定义 预定 义 范围 内 的 度量 HTML5 新 标签 ) 
<nav> 定义 导航 链接 (HTML5 新 标签 ) 
<noframes> 定义 针对 不 支持 框架 的 用 户 的 替代 内 容 
<noscript> 定义 针对 不 支持 客户 端 脚本 的 用 户 的 替代 内 容 
<object> 定义 内 嵌 对 象 
<ol> 定义 有 序列 表 
<optgroup> 定义 选择 列表 中 相关 选项 的 组 合 
<option> 定义 选择 列表 中 的 选项 
<output> 定义 输出 的 一 些 类 型 (HTML5 新 标签 ) 
<param> 定义 对 象 的 参数 ， 空 元 素 
<pre> 定义 预 格式 文本 
<progress> 定 Xf 竹 何 类 型 的 任务 的 进度 (HIMLS 新 标签 ) 
<q> 
<rp> 党 (HTML5 新 标签 ) 
<rt> 
<ruby> 定义 ruby 注释 (HTMLS5 新 标签 ) 
<samp> 定义 计算 机 代码 样本 
<script> 定义 客户 端 脚本 
<section> 定义 section (HIMLS 新 标签 ) 
<select> 定义 下 拉 列 表 
<small> 义 小 号 文本 
<source> 定义 媒介 源 HTML5 新 标签 ) 
<span> 定义 文档 中 的 节 
<strong> 定义 强调 文本 
<style> 定义 文档 的 样式 信息 
<sub> 定义 下 标 文 本 
<summary> 为 <details> 元 素 定义 可 见 的 标题 (HTML5 新 标签 ) 
<sup> 定义 上 标 文 本 
<table> 义 表 格 
<tbody> 定义 表格 中 的 主体 内 容 
<td> 定义 表格 中 的 单元 
<textarea> 定义 多 行 的 文本 输入 控件 
<tfoot> 定义 表格 中 的 表 注 内 容 
<th> 定义 表格 中 的 表 头 单元 格 
<thead> 定义 表格 中 的 表 头 内 容 
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标 签 描 述 
<time> 定义 日 期 /时 间 (HTML5 新 标签 ) 
<title> 定义 文档 的 标题 
<tr> 定义 表格 中 的 行 
<track> 定义 用 在 媒体 播放 器 中 的 文本 轨道 (HTML5 新 标签 ) 
<tt> 定义 打字 机 文本 
<ul> 定义 无 序列 表 
<var> 定义 文本 的 变量 部 分 
<video> 定义 视频 (HTML5 新 标签 ) 
<wbr> 定义 在 文本 何 处 适合 添加 换行 符 ‘HTML5 新 标签 ) 


2.1.3 属性 


HITML5 标签 拥有 属性 ， 属 性 为 HIMLS 元 素 提供 附加 信息 。 属 性 总 是 以 “名 称 / 值 ” 
对 的 形式 出 现 ， 比 如 “name="value"”， 属 性 总 是 在 HTML5 元 素 的 开始 标签 中 规定 。 
ep s 格 分 隔 ， 出 现 的 顺序 无 关 紧 要 。 属 性 值 要 用 单 引号 或 
双 引 号 括 起 来 ， 单 引号 括 起 来 的 属性 值 中 可 以 包含 双 引 号 ， 双 引号 括 起 来 的 属性 值 中 也 可 
以 包含 单 引 号 。 
例如 可 以 在 <body> 标 签 中 通过 属性 设置 页 面 的 背景 颜色 。 


<body bgcolor="yellow"> 


HTML5 中 有 些 属 性 是 通用 于 每 个 标签 的 , 是 HIMLS 全 局 属性 , 同时 各 个 标签 都 有 自 
己 的 特殊 属性 。 常 用 的 全 局 属性 是 标签 使 用 最 多 的 属性 ， 也 是 最 重要 的 属性 ， 见 表 2.3。 


表 2.3 HTML5 元 素 常用 的 全 局 属性 


属 性 值 描 述 

dk ee 定义 元 素 的 一 个 或 多 个 类 名 ， 如 需 为 一 个 元 素 规定 多 个 类 ， 
用 空格 分 隔 类 名 

id id 定义 元 素 的 唯一 

style style_definition 定义 元 素 的 行内 CSS 样式 

title text 定义 提示 工具 中 显示 的 文本 

dir ltrjrtl 定义 元 素 中 内 容 的 文本 方向 

和 i 定义 元 素 内 容 的 语言 。language_code 是 ISO 语言 代码 ， 中 

一 文 的 语言 代码 为 “zh”， 英 语 的 语言 代码 为 “en” 

contenteditable truelfalse 规定 元 素 内 容 是 否 可 编辑 

sal jdt 规定 元 素 是 否 可 拖 动 。auto 是 使 用 浏览 器 的 默认 行为 ， 链 
接 和 图 像 默认 是 可 拖 动 的 


在 HIML5 文件 中 有 很 多 元 素 重 复出 现 ， 为 了 区 分 ， 可 以 用 id 属性 给 每 个 元 素 定义 唯 
一 的 标识 。 在 HTML5 之 前 ， 以 数值 开头 的 id 和 类 是 无 效 的 ，HIMLS 放 开 了 这 个 限制 , id 
不 能 包含 空格 ， 每 个 元 素 的 id 属性 值 在 HTMLS5 文档 中 必须 是 唯一 的 。 

如 果 有 些 元 素 无 论 内 容 还 是 样式 都 基本 相同 ， 可 以 把 这 些 元 素 合 并 为 一 类 ， 用 class 
属性 进行 标识 ， 这 样 多 个 元 素 在 表现 时 可 以 共用 相同 的 样式 声明 。 
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2.1.4 语法 规则 


HIML5 语法 规则 的 要 求 比较 松散 ， 例 如 某 些 标签 语句 可 以 省 略 ， 省 略 并 不 意味 着 标 
签 不 存在 ， 它 是 隐 含 的 ， HIMLS 不 区 分 大 小 写 : 可 以 省 略 关闭 空 元 素 的 斜 杜 ， 属 性 值 中 
只 要 不 包含 “>”“、”“=” 或 者 空格 等 受 限 的 字符 ， 就 可 以 不 用 加 引号 ， 没 有 属性 值 也 可 
以 。 为 了 保证 代码 规范 ， 建 议 用 户 遵循 以 下 几 点 : 

@ 元 素 必 须 正确 泣 套 

在 HTML5 中 ， 所 有 的 元 素 必须 彼此 正确 地 嵌 套 。 例 如 : 

<b><i> 粗 体 和 和 斜体 </i></b> <!-- 正 确 --> 

<b><i> 粗 体 和 和 斜体 </b></i> <!-- 错 误 --> 

提示 : <!-- -> 是 HTML5 注释 语句。 

@ 非 空 元 素 要 有 结束 标签 

浏览 器 虽然 能 够 对 大 多 数 没 有 结束 标签 的 语句 进行 容错 处 理 ， 但 有 一 些 还 是 处 理 不 
了 ， 为 了 避免 这 种 情况 ， 非 空 元 素 最 好 使 用 结束 标签 。 例 如 : 

<p> 这 是 段落 </p> <!-- 正 确 --> 

<p> 这 是 段落 <!-- 不 建议 --> 

@ 元 素 标 签名 和 属性 名 最 好 小 写 

标签 名 和 属性 名 最 好 小 写 。 例 如 : 

<body> 

<p> 这 是 段落 </p> 

</body> 

@ 居 性 值 最 好 加 引号 

属性 值 最 好 用 引号 括 起 来 ， 特 别 是 属性 值 含有 空格 的 时 候 。 例 如 : 


<table width="100%"> 


@@ 属性 最 好 有 值 

使 用 的 属性 最 好 有 值 ， 不 能 简写 。 例 如 : 

<input checked="checked" /> <! 一 -正确 --> 

<input checked> <!-- 不 建议 --> 

无 论 HIMLS 对 语法 的 要 求 多 宽松 ， 都 有 必要 检验 标记 是 否 有 效 ， 有 效 的 标记 更 容易 
理解 ， 可 以 通过 W3C 验证 器 进行 检验 ， 链 接地 址 为 “https://validator.w3.org/”。 


2.2 ”WebStorm 基础 


欲 先 善 其 事 ， 必 先 利 其 器 ，WebStorm 是 JetBrains 专门 为 Web 开发 人 员 设 计 的 IDE 
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(Integrated Development Environment, 集成 开发 环境 ), 特别 适合 Web 前 端 开发 使 用 ,具有 
支持 重 构 、 支 持 代码 格式 化 细节 的 自 定义 、 良 好 的 编辑 体验 〈 如 快速 定位 最 近 的 编辑 、 快 
速 查看 代码 结构 及 定义 ) 等 优秀 IDE 具有 的 特点 , 轻 量 、 快 速 、 便 于 调试 .本 书 使 用 JetBrains 
WebStorm 11.0.3 版 本 。 


2.2.1 WebStorm 的 基本 操作 


@ 使 用 WebStorm 建立 “ 町 叮 书店 ”项 目 视频 讲解 

启动 WebStorm， 选 择 【 文 件 】|【 新 项 目 】 命 令 ， 打 开 Select Project Type 对 话 框 ， 在 
Location 文本 框 中 输入 “E:\book store”， 如 图 2.1 所 示 ， 或 者 单 击 文本 框 右 侧 的 选择 文件 
夹 图 标 ， 在 打开 的 Select Base Directory 对 话 框 中 选择 ， 然 后 单 击 【 确 定 】 按 钮 ， 最 后 单 击 
Create 按钮 创建 “ 叮 叮 书店 ”项 目 。 

@ 设置 WebStorm 使 用 环境 

选择 【文件 】| 【设置 】 命 令 ， 打开 【设置 】 对 话 框 。 


WebStorm 编辑 器 默认 字体 方案 一 一 Default 的 字 比 较 小 , 可 以 自 定义 方案 显示 大 一 些 。 
单 击 【设置 】 对 话 框 左 边 的 【编辑 器 】 代 颜色 和 字体 】IFont， 如 图 2.2 所 示 。 然 后 单 击 【 为 


存 为 】 按 钮 ， 在 【配色 方案 另存 为 】 对 话 框 的 【名 称 】 文 本 框 中 输入 “book store”， 单 击 
【确定 】 按 钮 ， 接 着 在 【主要 的 字体 】 下 拉 列 表 框 中 选择 “微软 雅 黑 ” 字 体 ， 在 【大 小 】 文 
本 框 中 输入 “16”， 最 后 单 击 【确定 】 按 钮 。 


) a , EMF ont 


DE ted HB Bs [THR ern, gniint 
CE 


二 x] me 加 


@ tetera 
jan 


图 2.1 Select Project Type 对 话 框 图 2.2 【设置 】 对 话 框 


在 使 用 WebStorm 建立 HIMLS 文档 时 会 根据 HTML 模板 将 整个 页 面 语言 定义 为 “en ”， 
对 于 中 文 Web 开发 者 而 言 ， 需 要 将 模板 页 面 默认 语言 从 “en” 改 为 “zh-CN ”或 去 掉 。 选 
择 【 设 置 】 对 话 框 左边 的 【编辑 器 】 代 文件 和 代码 模板 】 选中 【模板 】 列 表 框 中 的 HIML 
File 项 ， 将 右边 区 域 文 本 框 内 的 代码 行 “<html lang=-"en">” 改 为 “<html> ”或 “<html 
lang=-"zh-CN">”， 然 后 单 击 【确定 】 按 钮 。 

和 图 建立 “ 叮 叮 书店 ”空白 首页 

选择 【文件 】I【 新 建 】 命令， 打开 【新 建 】 列 表 框 ， 选 中 【HTML 文件 】 出 现 【HTML 
文件 】 对 话 框 ， 在 Name 文本 框 中 输入 “index” 或 “default”， 然 后 单 击 【确定 】 按 钮 ， 如 
图 2.3 所 示 。 这 里 将 <title> 元 素 内 容 “Title” 改 为 “ 叮 叮 书店 ” 在 随后 的 章节 中 会 逐步 完 
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善 叮 叮 书店 首页 的 内 容 。 


Emma 
口 凡人 w 小 交加 店名 


<!DOCTYPE html> 
<html> 


<head> 
<meta charset="UTF-g"> 
<titie>jiitla</title> 


</head> 
<body> 

</body> 
</htmls| 


图 2.3 WebStorm 主 界面 


号 
站 
医 


提示 : 如 果 一 个 URL 没有 指定 文件 名 ， 例 如 “http://www.tup.com.cn/”， 服 务 
回首 页 或 默认 页 ， 通 常 首页 或 默认 页 文件 名 为 index.html 或 default.html。 


index.html 页 面 的 源 代码 如 下 : 


<!DOCTYPE html> 
<htm1l lang="zh-CN"> 
<head> 
<meta charset="UTF-8"> 
<title> 叮 叮 书店 </title> 


</head> 

<body> 

</body> 

</html> 

可 以 看 到 ， 页 面 结构 符合 W3C 建议 的 HTML5 标准 。 
@ 在 浏览 器 中 预览 


将 鼠标 指针 移 到 主编 辑 区 , 会 弹出 5 种 主流 浏览 器 图 标 工具 栏 , 单 击 任 一 工具 栏 按钮 ， 
将 在 指定 的 浏览 器 中 显示 页 面 文件 。 

WebStorm 自动 保存 编辑 的 文件 ， 而 且 WebStorm 关闭 后 也 保存 编辑 的 历史 记录 ， 用 户 
可 以 选择 VCSI【 本 地 历史 】| 【显示 历史 】 命 令 查看 。 


2.2.2 WebStorm 的 快捷 键 


表 2.4 列 出 了 WebStorm 常用 的 快捷 键 。 
表 2.4 WebStorm 常用 的 快捷 键 


快 捷 键 功 能 
Ctrlt/ 或 Ctrl+Shift+/ 注释 (C/ 或 者 /*…*/) 
Shift+F6 重 构 、 重 命名 


CtrlHX 删除 行 
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续 表 
快 捷 键 功 能 
CtrlHD 复制 行 
Ctrl+G 查找 行 
Ctrl+ShiftHUp/Down 代码 向 上 /向 下 移动 
F2 或 Shift+F2 高 亮 错误 或 警告 快速 定位 


写 代 码 ， 按 Tab 


生成 代码 


选中 文本 ， 按 Ctrl+Shift+F7 


高 党 显示 所 有 该 文本 ， 按 Esc 键 高 亮 消 失 


Ctrl+B 或 Ctrl+ 鼠 标 左 键 单 击 


快速 打开 光标 处 的 类 或 方法 


Ctrl+AltrB 


跳 转 方法 实现 处 


Ctrl+Shift+I 打开 定义 快速 查找 

Alt+Up/Down 跳 转 到 上 一 个 /下 一 个 方法 

Ctrl+E 最 近 打开 的 文件 

AlttF1 查找 代码 所 在 位 置 

CtrlHAlt+L 格式 化 代码 

Ctrl+R 替换 文本 

CtrlHF 查找 文本 

Ctrl+Shift+R 在 路 径 中 替换 文本 。 多 个 文件 替换 
Ctrl+Shift+F 在 路 径 中 查找 文本 。 多 个 文件 查找 
CtrltP 方法 参数 提示 

F3 查找 下 一 个 

Shift+F3 查找 上 一 个 

Alt+Shift+F 将 当前 文件 加 入 收藏 夹 

Ctrl+Alt+S 打开 配置 窗口 

Ctrl+ShiftHN 通过 文件 名 快速 查找 工程 内 的 文件 ( 必 记 ) 
Ctrl+Shift+tAItHN 通过 一 个 字符 快速 查找 位 置 ( 必 记 ) 
Shift+Enter 重新 开始 一 行 ( 无 论 光标 在 哪个 位 置 ) 
Ed i 3 try、catch、for 等 ) 用 * 来 围绕 选中 的 代码 行 ，* 包 括 
Ctrl+ShiftHU 光标 所 在 位 置 大 小 写 转换 

CtrlHDelete 删除 文字 结束 

Ctrl+Backspace 删除 文字 开始 

Ctrl+E 弹出 最 近 打开 的 文件 

Fl11 切换 标记 ， 也 称 书签 

CtrlHShifttF12 切换 最 大 化 编辑 器 

Alt+Shift+F 添 至 收藏 夹 


2.3 ”文档 结构 元 素 


HTML5 文档 结构 元 素 用 来 描述 HTML5 文档 的 顶层 结构 ， 包 括 文档 根 元 素 html、 头 
元 素 head 和 体 元 素 body。 
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第 2 章 初 识 HTML5 
2.3.1 ” <html> 标签 


<html> 与 </html> 标 签 定义 了 文档 的 开始 和 结束 ， 告 知 浏览 器 其 自身 是 一 个 HTML 文 
档 。 文 档 由 头 部 和 主体 组 成 ， 文 档 的 头 部 由 <head> 标 签 定义 ， 主 体 由 <body> 标 签 定义 。 


2.3.2 <head> 标签 


<head> 标 签 用 于 定义 文档 头 部 ，<head> 元 素 中 的 内 容 可 以 是 脚本 、 样 式 表 和 提供 的 元 
信息 等 。 文 档 的 头 部 描述 了 文档 的 各 种 属性 和 信息 ， 绝 大 多 数 文档 头 部 包含 的 信息 不 会 作 
为 内 容 显 示 。 

<base>、<link>、<meta>、<script>、<style> 和 <title> 这 些 标签 可 用 在 <head> 里 ，<title> 
定义 文档 的 标题 ， 是 <head> 唯 一 必需 的 元 素 。 

<head> 标 签 放 在 文档 的 开始 处 ， 紧 跟 在 <html> 的 后 面 。 


2.3.3 ”<body> 标 签 


body 元 素 定义 文档 的 主体 ，body 元 素 包含 文档 的 所 有 内 容 ( 例 如 文本 、 超 链接 、 图 
像 、 表 格 和 列表 等 )。 


2.4” 头 部 元 素 


表 2.5 列 出 了 在 头 部 元 素 里 可 以 使 用 的 标签 ， 这 些 标签 必须 用 在 <head> 里 。 
表 2.5 头 部 元 素 标签 


标 签 描 述 


<title> | 文档 标题 
<base> | 页 面 中 所 有 链接 的 基准 URL 
<link> 资源 引用 


<meta> 


2.4.1 <title> 标 签 


<title> 定 义 文 档 的 标题 ， 标 题 显示 在 浏览 器 窗口 的 标题 栏 上 ， 当 把 文档 加 入 用 户 的 链 
接 列 表 或 者 收藏 夹 时 ， 标 题 将 成 为 该 文档 链接 的 默认 名 称 。<title> 标 签 是 <head> 标 签 中 唯 
一 要 求 包含 的 。 例 如 : 

<head> 

<title> 叮 叮 书店 </title> 
</head> 


31 | 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 

要 选择 一 个 正确 的 标题 ， 这 对 于 文档 来 说 十 分 重要 ， 像 “第 一 章 ” 或 “第 二 部 分 ”这 
样 的 标题 ， 对 用 户 理解 文档 内 容 毫 无 用 处 。 标 题 描述 要 有 针对 性 ， 例 如 “第 一 章 : HIML5 
标签 ”或 者 “第 二 部 分 : 如 何 使 用 标题 ” 这 样 的 标题 不 仅 表达 了 它 在 一 个 大 型 文档 集中 
的 位 置 , 还 说 明了 文档 的 具体 内 容 。 总 之 , 应 该 设计 一 个 能 够 传达 一 定 内 容 和 目地 的 标题 。 


2.4.2 <meta> 标 签 


meta 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information)， 例 如 针对 搜索 引擎 提供 的 关 
键 词 。<meta> 标 签 位 于 文档 的 头 部 ， 是 空 元 素 ，<meta> 标 签 通过 属性 定义 与 文档 相关 联 的 
“名 称 / 值 ”对 来 提供 页 面 的 元 信息 ， 见 表 2.6。 其 中 , http-equiv 和 name 属性 是 定义 名 称 的 ， 
content 属性 是 定义 值 的 。 


表 2.6 meta 元 素 的 属性 


属 性 值 描 述 
expires 定义 HTTP 协议 的 头 部 元 信息 名 称 。 其 中 ，expires 设置 网 页 在 缓存 
http-equiv | refresh 区 的 到 期 时 间 ; refresh 设置 自动 刷新 页 面 的 时 间 ， 跳 转 的 〈 重 定向 
X-UA-Compatible 页 面 
author 
description 定义 元 信息 名 称 。 其 中 ，keywords 为 搜索 引擎 提供 的 网 页 关键 字 ; 
keywords description 为 搜索 引擎 提供 的 网 页 内 容 描述 ; author 为 搜索 引擎 提供 
name generator 的 网 页 作者 ; generator 为 搜索 引擎 提供 的 网 页 使 用 的 编辑 器 ; revised 
revised 为 搜索 引擎 提供 的 网 页 修订 信息 ; robots 为 搜索 引擎 提供 的 搜索 机 
robots 器 人 向 导 参 数 
viewport 
定义 与 http-equiv 或 name 属性 相关 的 元 信息 的 值 。 content 属性 提供 
na i 了 “名 称 / 值 ”对 中 的 值 ， 该 值 可 以 是 任何 有 效 的 字符 串 
@ http-equiv 居 性 


http-equiv 属性 定义 了 HTTP 协议 头 部 使 用 的 元 信息 名 称 , 当 服 务 器 向 浏览 器 发 送 文档 
时 可 以 发 送 许多 由 “名 称 / 值 ” 对 组 成 的 元 信息 。 

http-equiv 属性 主要 有 以 下 几 个 值 。 

1) expires 

为 了 提高 访问 速度 ， 很 多 浏览 器 采用 累积 式 加 速 的 方法 ， 将 曾经 访问 的 网 页 存放 在 本 
地 计算 机 里 ， 存 储 的 位 置 称 为 浏览 器 缓存 区 ， 以 后 每 次 访问 网 站 时 浏览 器 会 首先 搜索 缓存 
区 目录 ， 如 果 有 访问 过 的 内 容 ， 浏 览 器 就 不 必 从 网 上 下 载 ， 直 接 从 缓存 区 中 调 出 来 ， 这 样 
就 提高 了 访问 网 站 的 速度 。expires 用 于 设 定 网 页 在 缓存 区 的 到 期 时 间 ， 如 果 过 期 ， 用 户 必 
须 到 服务 器 上 重新 下 载 。 另 外 ，expires 必须 使 用 GMT 的 时 间 格 式 。 例 如 : 


<meta http-equiv="expires" content="Fri, 5 Mar 2012 18:18:18 GMT"> 


格林 尼 治 标准 时 间 是 指 位 于 伦敦 郊区 的 皇家 格林 尼 治 天 文 台 的 标准 时 间 , GMT 是 中 央 
时 区 ， 北 京 在 东 8 区 ， 相 差 8 个 小 时 ， 所 以 北京 时 间 =GMT 时 间 + 八 小 时 。 

2) refresh 

refresh 用 于 刷新 与 跳 转 〈 重 定向 ) 页面。 
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国 ].1 HTML5(meta_http-equiv_Refresh).html， 说 明了 refresh 的 用 
法 , 其 中 content 值 为 5 是 指 停留 5 秒 钟 后 自动 重 定向 到 URL 指定 的 网 址 。 
如 果 没 有 指定 URL， 则 5 秒 钟 后 页 面 自动 刷新 。 

源 代码 如 下 : 


<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 自动 刷新 或 重 定向 </title> 
<meta http-equiv="refresh" content="5; url=http://www.tsinghua.edu.cn/"> 
</head> 
<body> 
<p> 在 5 秒 后 被 重 定向 到 下 面 的 地 址 。</p> 
<a href="http://www.tsinghua.edu.cn/"> 清 华 大 学 </a> 
</body> 
</html> 


视频 讲解 


3) X-UA-Compatible 

X-UA-Compatible 是 针对 IE8 的 一 个 特殊 的 HITP 协议 头 部 元 信息 ， 用 来 指定 正 浏览 
器 进行 解析 时 可 以 模拟 某 个 特定 版 本 正 浏览 器 的 泻 染 方式 ， 从 而 解决 正 浏览 器 的 兼容 性 
问题 。 通 过 在 meta 中 设置 X-UA-Compatible 的 值 可 以 指定 正 浏览 器 演 染 网 页 的 兼容 性 模 
式 ， 例 如 : 


<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

"IE=edge" 的 意思 是 让 I 下 使 用 最 新 的 内 核 演 染 网 页 。 

Google 为 了 解决 正 浏览 器 对 Web 标准 支持 较 差 的 问题 , 推出 了 Google Chrome Frame 
浏览 器 辅助 插件 ， 让 下 6/7/8/9 直接 使 用 Chrome 浏览 器 内 核 泻 染 网 页 。 也 就 是 说 ， 用 户 在 
使 用 正 浏 览 网 页 时 实际 上 使 用 的 是 Chrome 浏览 器 。 例 如 : 

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 


"TE=edge,chrome=1" 的 意思 是 如 果 用 户 安装 了 Google Chrome Frame， 则 使 用 Google 
Chrome Frame 来 演 染 网 页 ， 如 果 未 安装 Google Chrome Frame， 则 使 用 最 新 版 本 的 下 内 核 
泻 染 网 页 。 建 议 用 户 在 每 个 页 面 都 添加 这 个 标签 ， 用 最 方便 的 方式 来 解决 正 浏览 器 兼容 


问题 。 


Google 已 经 在 2014 年 1 月 停止 更 新 Chrome Frame 和 技术 支持 , 因为 当前 浏览 器 基本 
上 都 能 很 好 地 支持 Web 标准 。 
@ name 居 性 


1) 和 搜索 有 关 的 元 信息 

name 属性 定义 的 meta 名 称 主要 用 于 描述 网 页 内 容 和 网 页 的 相关 信息 ， 便 于 搜索 机 器 
人 查找 和 分 类 ， 包 括 keywords、description、author、generator、revised 和 robots。 

robots 参数 有 all、none、index、noindex、follow、nofollow， 默 认 是 all。 


33 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


all: 允许 搜索 机 器 人 检索 网 页 ， 页 面 上 的 链接 可 以 被 查询 。 

none: 不 允许 搜索 机 器 人 检索 网 页 ， 且 页 面 上 的 链接 不 可 以 被 查询 。 

index: 允许 搜索 机 器 人 检索 网 页 ， 可 以 让 robot/spider 登录 。 

noindex: 不 允许 搜索 机 器 人 检索 网 页 ， 页 面 上 的 链接 可 以 被 查询 ,不 让 robot/spider 
登录 。 

follow: 页 面 上 的 链接 可 以 被 查询 。 

nofollow: 不 允许 搜索 机 器 人 检索 网 页 , 页 面 上 的 链接 可 以 被 查询 , 不 让 robot/spider 
顺 着 此 页 的 链接 往 下 探查 。 

在 搜索 引擎 使 用 搜索 机 器 人 访问 一 个 网 站 时 ， 首 先 会 检查 该 网 站 的 根 目录 下 是 否 有 
robots.txt 文件 ， 这 个 文件 用 于 指定 搜索 机 器 人 在 网 站 上 的 抓 取 范围 。 网 络 管理 员 可 以 通过 
Iobots.txt 来 定义 哪些 目录 不 能 访问 ， 或 者 哪些 目录 对 于 某 些 特定 的 spider 程序 不 能 访问 。 
例如 有 些 网 站 的 可 执行 文件 目录 和 临时 文件 目录 不 希望 被 搜索 引擎 搜索 到 ， 那 么 网 络 管理 
员 就 可 以 把 这 些 目录 定义 为 拒绝 访问 目录 。 

当 网 站 包含 不 希望 被 搜索 引擎 收录 的 内 容 时 才 需 要 使 用 robots.txt 文件 , 如 果 希 望 搜索 
引擎 能 收录 网 站 上 的 所 有 内 容 ， 不 要 建立 robots.txt 文件 。 

几乎 所 有 的 搜索 引擎 都 是 通过 搜索 机 器 人 自动 在 Intemet 搜索 ， 当 发 现 新 的 网 站 时 会 
检索 页 面 中 的 keywords 和 description， 将 其 收录 到 检索 数据 库 ， 然 后 根据 关键 词 的 密度 将 
网 站 排序 。 

也 就 是 说 ， 如 果 页 面 没 有 使 用 <meta> 标 签 定义 keywords 和 description， 那 么 搜索 机 器 
人 无 法 将 你 的 站 点 收录 到 检索 数据 库 ， 浏 览 者 也 就 不 可 能 通过 搜索 引擎 来 访问 你 的 站 点 。 

如 果 关 键 词 选 得 不 好 ， 密 度 不 高 ， 检 索 出 来 后 可 能 被 排 在 几 十 甚至 几 百 万 个 站 点 的 后 
面 ， 被 浏览 者 访问 的 可 能 性 也 非常 小 ， 所 以 寻找 合适 的 keywords 和 description 非常 重要 ， 
相关 知识 可 参考 SEO (Search Engine Optimization， 搜 索引 擎 优化 )， 搜 索引 擎 优化 是 一 种 
利用 搜索 引擎 的 搜索 规则 来 提高 网 站 在 相关 搜索 引擎 中 自然 排名 的 方式 。 

加 22 HTML5(meta_name).html， 该 页 面 中 使 用 了 meta 元 素 的 name 属性 ， 建 议 用 
户 在 每 个 页 面 中 都 定义 这 些 属性 ， 以 方便 搜索 引擎 收录 ， 更 好 地 推广 自己 的 网 站 。 

源 代码 如 下 : 

<!DOCTYPE html> 

<html lang="zh-CN"> 

<head> 

<meta charset="UTE=8"> 

<title> 辅 助 搜索 引擎 </title> 

<meta name="robots" content="index, follow"> 

<meta name="description" content="HTML meta 示例 "> 

<meta name="keywords" content="HTML,meta"> 

<meta name="author" content=" 张 树 明 "> 

<meta name="generator" content="JetBrains Webstorm 11.0.3"> 

</head> 

<body> 

<p> 本 文档 的 meta 属性 标识 了 robots 策略 。</p> 


<p> 本 文档 的 meta 属性 描述 了 该 文档 和 关键 词 。</p> 
<p> 本 文档 的 meta 属性 标识 了 创作 者 和 编辑 软件 。</p> 
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</body> 
</html> 


第 2 章 初 识 HTMLS 
2) viewport 


Viewport 〈 视 口 ) 是 指 浏览 器 窗口 内 的 内 容 区 域 ， 不 包括 菜单 栏 、 工 具 栏 、 状 态 栏 和 
边框 等 区 域 ， 也 就 是 网 页 实际 显示 的 区 域 。 

viewport 是 2007 年 苹果 公司 发 布 iPhone 的 时 候 引 入 的 , 目前 基于 Android 和 iOS 的 移 
动 设 备 浏览 器 基本 上 都 支持 viewport。 在 没有 引入 viewport 之 前 ， 在 移动 设备 上 浏览 网 页 
时 一 般 会 默认 按 980px、1024px 或 其 他 值 〈 由 移动 设备 决定 ) 宽度 来 泻 染 网 页 ， 然 后 把 页 
面 缩小 呈现 在 视 口 当中 ， 再 让 用 户 去 放大 或 缩小 进行 浏览 ， 很 不 方便 ， 而 且 浏 览 器 经 常会 
出 现 横向 深 动 条 。 如 果 希 望 移动 设备 的 屏幕 视 口 能 够 以 网 页 原 大 小 来 显示 页 面 ， 在 大 多 数 
情况 下 可 以 如 下 使 用 <meta> 标 签 : 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

width=device-width 的 意思 是 当前 viewport 的 宽度 等 于 移动 设备 屏幕 的 宽度 ;initial- 
scale=1.0 的 意思 是 初始 缩放 为 1.0， 页 面 按 实 际 尺寸 显示 ， 无 任何 缩放 。 

但 这 样 会 带 来 一 个 问题 ， 由 于 移动 设备 屏幕 比 桌 面 显示 器 的 尺寸 小 ， 只 能 显示 整个 网 
页 的 一 部 分 。 那 么 如 何 让 移动 设备 屏幕 显示 网 页 的 全 部 内 容 ? 目前 最 好 的 解决 方案 是 采用 
响应 式 Web 设计 。 所 谓 响应 式 Web 设计 ， 就 是 网 页 内 容 会 随 着 访问 它 的 视 口 及 设备 的 不 
同 而 呈现 不 同 的 样式 。 响 应 式 Web 设计 是 针对 任意 设备 对 网 页 内 容 进行 完美 布局 的 一 种 显 
示 机 制 ， 最 佳 实践 是 先 设计 移动 设备 屏幕 的 内 容 、 样 式 ， 然 后 再 向 大 屏幕 扩展 。 

Viewport 是 为 了 解决 网 页 在 移动 设备 上 显示 出 现 的 问题 采用 的 非 标 
(但 事实 上 却 是 标准 的 ) 方式 。 


启动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html (在 第 2 章 的 2.2 节 建立 )， 进 入 代 
码 编辑 区 ， 添 加 元 信息 ， 操 作 步 又 如 下 

将 光标 定位 到 “<title> 叮 叮 书店 </title>” 的 后面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 

<meta name="viewport" content="width=device-width，initial-scale=1.0"> 

<meta name="keywords" content=" 书 店 , 叮 叮 书店 ,图书 "> 

<meta name="description" content=" 叮 叮 书店 是 一 个 销售 书籍 的 网 上 书店 。"> 

<meta name="robots" content="index,follow"> 

限于 篇 幅 , 本 书 在 后 面 章节 中 所 列 出 的 源 代码 均 省 略 掉 文档 类 型 声明 和 html 根 标签 语 
句 ， 所 用 的 文档 类 型 声明 均 是 HTML5， 元 素 内 容 所 用 的 语言 是 zh-CN。 

<!DOCTYPE html> 

<html lang="zh-CN"> 

</html> 
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省 略 掉 head 里 用 于 解决 正 浏览 器 兼容 问题 的 meta 标签 和 网 页 适应 移动 设备 显示 的 
meta 标签 以 及 定义 页 面 使 用 字符 集 的 meta 标签 。 


<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta charset="UTF-8"> 


本 书 中 的 所 有 实例 和 案例 均 已 通过 W3C HTML5 校 验 和 W3C CSS3 校 验 , 校 验 地 址 分 
别 为 “https://Vvalidator.w3.org/” 和 “http://jigsaw.w3.org/css-validator/”。 


2.6 ”小结 


本 章 简要 介绍 了 HIMLS 文件 结构 和 文档 结构 元 素 , 详细 介绍 了 HTML5 基本 语法 和 头 部 
主要 元 素 ， 最 后 简单 介绍 了 使 用 WebStorm 工具 软件 建立 HTMLS5 页 面 的 过 程 和 基本 操作 。 


2.7 习题 


@ 选择 题 
(1) 关于 HTML5 的 基本 语法 ， 下 列 说 法 错误 的 是 )。 

A. 在 文档 开始 要 定义 文档 的 类 型 B. 元 素 允许 交叉 风 套 
空 标签 最 好 加 “/” 来 关闭 D. 属性 值 建议 用 " 括 起 来 
(2) <!DOCTYPE> 的 作用 是 〈 )。 

A. 用 来 定义 文档 类 型 B. 用 来 声明 命名 空间 

C. 用 来 向 搜索 引擎 声明 网 站 关键 字 D. 用 来 向 搜索 引擎 声明 网 站 作者 
(3) ( ) 标签 是 文件 头 的 开始 。 

A. <html> B. <head> C. <font> D. <frameset> 
(4) 以 下 代码 片段 完全 符合 HTML5 语法 标准 的 是 

A. <input type=text> 

B. <input TYPE="text"> 

C. <input type="text" disabled> 

D. <input type="text" disabled="disabled"> 
(5) 以 下 代码 片段 完全 符合 HTML5 语法 标准 的 是 (。”)。 

A. <br> B. <p> 这 是 一 个 段落 C. <div></div> D. <hr> 
@ 简 答 题 
(1) 什么 是 元 素 ? 元 素 的 类 型 、 属 性 和 范围 用 什么 来 标识 、 设 置 和 界定 ? 
(2) 元 素 可 以 分 为 哪 两 类 ? 它们 的 差别 在 哪里 ? 
(3) HTML5 中 的 元 素 名 与 属性 名 区 分 字母 的 大 小 写 吗 ? 有 什么 使 用 惯例 ? 
(4) 文档 头 部 中 有 哪个 元 素 是 必需 的 ? 该 元 素 的 功能 是 什么 ? 
(5) 写 出 HTML5 文档 的 基本 结构 。 
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内 容 结构 简称 结构 ， 是 为 网 页 内 容 建立 一 个 框架 ， 就 像 写 文章 先 写 一 个 提纲 。 结 构 使 
页 面 内 容 看 起 来 不 会 杂乱 无 章 ， 每 一 部 分 都 紧密 联系 ， 形 成 一 个 整体 。 采 用 HTMLS5 结构 
标签 可 以 将 页 面 划分 成 不 同 的 区 域 或 块 形成 结构 ， 然 后 在 不 同 的 区 域 或 块 中 填充 内 容 ， 如 
报刊 /杂志 版 面 设计 一 样 。 本 章 首先 详细 介绍 HTML5 结构 标签 和 基础 标签 ， 接 下 来 简单 了 
解 格式 化 标签 ， 然 后 重点 介绍 HTML5 列表 ， 最 后 详细 介绍 建立 叮 叮 书店 首页 内 容 结 构 的 
过 程 。 

本 章 要 点 : 

如 HTML5 结构 标签 。 

4 HTML5 基础 标签 。 

如 HTML5 格式 化 标签 。 

4 HTML5 列表 。 


3.1 HTML5 结构 标签 


HTML5 结构 标签 用 于 搭建 页 面 主体 内 容 结构 ， 形 成 不 同 的 区 块 ， 完 成 整个 页 面 的 排 
版 布局 。 表 3.1 列 出 了 HTML5 结构 标签 。 


表 3.1 HTML5 结构 标签 


标 签 描述 
<article> 定义 文章 (HTML5 新 标签 ) 
<aside> 定义 页 面 内 容 之 外 的 内 容 (HTMLS5 新 标签 ) 
<details> 定义 元 素 的 细节 (HTMLS5 新 标签 ) 
<footer> 定义 section 或 page 的 页 脚 (HTMLS5 新 标签 ) 
<header> 定义 section 或 page 的 页 眉 (HTMLS5 新 标签 ) 
<main> 定义 文档 的 主要 内 容 (HTML5.2 新 标签 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


续 表 
标 签 描 述 
<nav> 定义 导航 链接 (HTML5 新 标签 ) 
<section> 定义 section (HIMLS 新 标签 ) 
<summary> 为 details 元 素 定 义 可 见 的 标题 HTMLS5 新 标签 ) 
<div> 定义 文档 中 的 节 
<span> 定义 文档 中 的 行内 元 素 


3.1.1 <header> 标 签 
<header> 标 签 定 义 文档 的 页 眉 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 一 个 内 容 区 块 的 标 
题 ， 但 也 可 以 包含 其 他 内 容 ， 比 如 在 header 里 面 放置 logo 图 片 、 搜 索 表单 等 。 


提示 : 在 一 个 页 面 内 并 没有 限制 header 的 出 现 次 数 ， 也 就 是 说 可 以 在 同一 页 面 内 不 同 
的 内 容 区 块 上 分 别 加 上 一 个 header 元 素 。 


在 HTML5 中 ， 一 个 header 元 素 至 少 可 以 包含 一 个 heading 元 素 (hl 一 h6)。 
。 一 大 
3.1.2 <main> 标 签 


<main> 标 签 定义 文档 的 主要 内 容 。<main> 标 签 中 的 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 
不 包含 在 文档 中 重复 出 现 的 内 容 ， 例 如 边栏 、 导 航 栏 、 版 权 信息 、 站 点 标志 等 。 

提示 : 在 一 个 文档 中 不 能 出 现 一 个 以 上 的 <main> 标 签 。 main 元 素 不 能 是 article、aside、 
footer、header 或 nav 的 子 元 素 。 


3.1.3 ”<nav> 标 签 


<nav> 标 签 定义 导航 链接 的 部 分 ， 主 要 用 于 构建 导航 菜单 、 侧 边栏 导航 、 内 页 导航 和 
翻 页 操作 等 区 域 。 


3.1.4 ”<article> 标 签 
<article> 标 签 表示 页 面 中 的 一 块 与 上 下 文 不 相关 的 独立 内 容 ， 比 如 一 篇 文章 。 这 篇 文 


章 应 有 其 自身 的 意义 ， 应 该 有 可 能 独立 于 站 点 的 其 他 部 分 ， 例 如 论坛 帖子 、 报 纸 文 章 、 博 
客 条 目 和 用 户 评论 等 。 


3.1.5 ”<section> 标 签 


<section> 标 签 定 义 文档 中 的 节 ( 区 段 )， 例 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 
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3.1.6 ”<aside> 标 签 


<aside> 标 签 定义 其 所 处 内 容 之 外 的 内 容 ， 这 个 内 容 应 该 与 附近 的 内 容 相关 ， 例 如 可 用 
作文 章 的 侧 栏 或 边栏 。 


3.1.7 ”<footer> 标 签 


<footer> 标 签 定义 文档 或 节 的 页 脚 ，footer 元 素 应 当 含 有 其 包含 元 素 的 信息 。 页 脚 通 常 
包含 文档 的 建立 日 期 、 作 者 、 版 权 信息 、 使 用 条 款 链接 和 联系 信息 等 。 用 户 可 以 在 一 个 文 
档 中 使 用 多 个 <footer> 标 签 。 


3.1.8 <details> 标 签 和 <summary> 标 签 


<details> 标 签 用 于 描述 文档 或 文档 中 某 个 部 分 的 细节 。details 元 素 实 际 上 是 一 种 用 于 
标识 其 内 部 的 子 元 素 可 以 被 展开 ,收缩 显示 的 元 素 。details 元 素 具有 一 个 布尔 类 型 值 的 open 
属性 ， 当 open 属性 值 为 true 时 元 素 内 部 的 子 元 素 被 展开 显示 ， 当 open 属性 值 为 false 时 其 
内 部 的 子 元 素 被 收缩 起 来 不 显示 。open 属性 的 默认 值 为 false， 当 页 面 打开 时 其 内 部 的 子 元 

<summary> 标 签 可 以 为 details 元 素 定义 标题 ， 标 题 是 可 见 的 ， 用 户 单 击 标题 时 会 展开 
显示 details 元 素 的 内 容 ， 再 次 单 击 标题 时 details 元 素 会 收缩 起 来 不 显示 。summary 元 素 从 
属于 details 元 素 。 


如 果 details 元 素 内 没有 定义 summary 元 素 ， 浏 览 器 会 提供 默认 的 文字 显示 ， 例 如 “ 详 
细 信 息 ”。 


提示 : IE 和 Edge 不 支持 <details> 标 签 。 
3.1.9 ” ”<div> 标签 


HTMLS 中 几乎 所 有 的 标签 都 是 有 有 具体 语义 的 ， 例 如 <title> 标 签 用 于 定义 文档 的 标题 。 
但 <div> 和 <span> 标 签 并 没有 有 具体 标识 这 个 元 素 到 底 是 什么 , 需要 用 户 在 实际 使 用 中 根据 元 
素 的 内 容 确定 。 

<div> 标 签 用 来 定义 文档 中 的 分 区 或 节 。<div> 标 签 可 以 把 文档 分 割 为 独立 的 、 不 同 的 
部 分 ， 是 一 个 容器 标签 ，<div> 的 内 容 可 以 是 任何 HIMLS 元 素 。 如 果 有 多 个 <div> 标 签 把 
文档 分 成 多 个 部 分 ， 可 以 使 用 id 或 class 属性 来 区 分 不 同 的 <div>。 

div 元 素 在 显示 时 默认 是 一 个 块 元 素 ， 块 元 素 的 宽度 为 100%， 而 且 后 面 隐 藏 附带 有 换 
行 符 ， 块 元 素 在 页 面 显示 时 始终 占据 一 行 ， 这 样 块 元 素 周围 的 元 素 不 能 与 块 元 素 显示 在 同 
一 行 上 。 例 如 下 面 的 代码 : 


<div> 
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<h3> 这 是 一 个 标题 </h3> 
<p> 这 是 一 个 段落 </p> 
</div> 
<span> 一 些 文本 </span> 
<span> 一 些 其 他 文本 </span> 


是 块 元 素 ， 所 以 显示 在 下 一 行 。 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


其 显示 效果 如 图 3.1 所 示 。 由 于 “<span> 一 些 文本 </span>” 在 <div> 标 签 的 后 面 ，div 


_ 这 是 一 个 标题 
3.1.10 ”<span> 标 签 [a 人 
一 些 文本 一 些 其 他 文本 


<span> 标 签 用 来 定义 文档 中 一 行 的 一 部 分 ， 在 


显示 时 默认 是 一 个 行内 元 素 ， 行 内 元 素 没有 固定 的 。 图 31 <div> 和 <span> 标 签 显 示 示意 图 
宽度 ， 根 据 span 元 素 的 内 容 决 定 。span 元 素 的 内 容 主 要 是 文本 。 
在 图 3.1 所 示 的 示例 中 , 第 2 个 <span> 标 签 前 面 也 是 一 个 <span> 标 签 ,所 以 第 2 个 <span> 


标签 的 内 容 紧 接着 前 一 个 <span> 标 签 的 内 容 显示 。 


3.2 HTML5 基础 标签 


基础 标签 是 HIMLS 使 用 最 多 的 标签 ， 见 表 3.2。 


表 3.2 HTML5 基础 标签 
标签 
<hl>~<h6> 
<p> 
<br> 
<hr> 


< 一 !--> 


3.2.1 标题 


标题 使 用 <h1> 一 <h6> 标 签 进行 定义 。<hl> 定 义 最 大 的 标 
题 , <h6> 定 义 最 小 的 标题 , HTMLS5 会 自动 在 标题 前 后 添加 一 
个 额外 的 换行 。 下 面 的 代码 使 用 了 <hl1> 一 <h6>， 显 示 效 果 如 


图 3.2 所 示 。 


<h1> 这 是 一 个 标题 </h1> 
<h2> 这 是 一 个 标题 </h2> 
<h3> 这 是 一 个 标题 </h3> 
<h4> 这 是 一 个 标题 </h4> 
<h5> 这 是 一 个 标题 </h5> 


描述 
标题 1 一 标题 6 
换行 
水 平 线 
注释 


这 是 一 个 标题 
这 是 一 个 标题 

这 是 一 个 标题 

这 是 一 个 标题 


这 是 一 个 标题 


过 亚 一 个 插 吐 


图 3.2 标题 示意 图 
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<h6> 这 是 一 个 标题 </h6> 


3.2.2 段落 


正文 段落 使 用 <p> 标 签 进行 定义 ， 例 如 : 
<p> 这 是 一 个 段落 </p> 
<p> 这 是 另 一 个 段落 </p> 


3.2.3 换行 符 


在 一 个 段落 内 ， 如 果 当 前 行 没有 结束 ， 需 换行 显示 ， 可 以 使 用 <br> 标 签 。 
<p> 这 是 <br /> 一 个 段落 <br /> 被 换行 </p> 


3.2.4 注释 


注释 标签 用 于 在 HTML5 源 代码 中 插入 注释 ， 注 释 会 被 浏览 器 忽略 。 
<!-- 这 是 一 个 注释 --> 
在 左 括号 后 需要 写 一 个 惊叹 号 ， 右 括号 前 就 不 需要 了 。 


3.3 HTML5 格式 化 标签 


HTML5 定义 了 很 多 供 文本 格式 化 输出 的 元 素 ， 有 确定 的 语义 ， 通 过 呈现 特殊 的 样式 
加 以 区 分 ， 比 如 粗 体 和 和 斜体 字 。 

<tt> 呈 现 类 似 打字 机 或 者 等 宽 的 文本 效果 、<i> 显 示 斜 体 文本 效果 、<b> 呈 现 粗 体 文本 
效果 、<big> 呈 现 大 号 字体 效果 、<small> 呈 现 小 号 字体 效果 ， 这 些 元 素 都 是 字体 样式 元 素 ， 
建议 用 户 使 用 样式 表 设 定 来 取得 更 加 丰富 的 效果 。 

另外 , <em> 把 文本 定义 为 强调 的 内 容 、<strong> 把 文本 定义 为 语气 更 强 的 强调 的 内 容 、 
<dfn> 定 义 一 个 定义 项 目 、<code> 定 义 计 算 机 代码 文本 、<samp> 定 义 样本 文本 、<kbd> 定 义 
键盘 文本 、<var> 定 义 变量 、<cite> 定 义 引 用 ， 这 些 都 是 短语 元 素 ， 这 些 标 签 拥有 确切 的 语 
义 ， 如 果 只 是 为 了 达到 某 种 视觉 效果 而 使 用 ， 建 议 用 户 使 用 样式 表 。 


3.3.1 文本 格式 化 标签 


表 3.3 列 出 了 HIMLS 定义 的 文本 格式 化 标签 。 
表 3.3 文本 格式 化 标签 
标 签 描 述 
<sub> 下 标 文 本 
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续 表 
标 签 描 述 
<sup> 上 标 文 本 
<ins> | 插入 文本 
<del> | 删除 文本 
<wbr> | 定义 在 文本 的 何 处 适合 添加 换行 符 (HTMLS5 新 标签 ) 
<pre> 预 格式 文本 


<wbr> 标 签 规定 在 文本 的 何 处 适合 添加 换行 符 , 作用 是 建议 浏览 器 在 这 个 标签 处 换行 ， 
注意 只 是 建议 而 不 是 必须 在 此 处 换行 ， 还 需要 根据 整 行文 字 的 长 度 而 定 ， 也 可 以 称 “ 软 换 
行 ” <wbr> 当 浏览 器 窗口 或 者 父 级 元 素 的 宽度 足够 宽 时 不 进行 换行 ， 而 当 宽 度 不 够 时 主动 
在 此 处 进行 换行 。 例 如 下 面 的 代码 : 


<p> 
To learn AJAX, you must be familiar with the XM<wbr>LHttpRequest Object. 
</p> 
在 正常 情况 下 ， 当 宽度 过 小 不 足以 在 行 末 书写 完 一 个 完整 单词 时 会 将 行 末 的 整个 单词 


放 到 下 一 行 ， 实 现 换 行 ， 如 果 在 单词 的 中 间 位 置 加 入 <wbr> 标 签 ， 就 会 拆 分 一 个 单词 换行 。 
提示 : <wbr> 对 中 文 没有 作用 。 
<pre> 用 来 定义 预 格式 化 文本 ， 在 <pre> 标 签 内 容 中 的 文本 通常 会 保留 空格 和 换行 符 ， 
显示 为 等 宽 字 体 。 
贺 31 HTML5(format)html， 说 明了 在 HIMLS 文件 中 如 何 对 文本 进行 格式 化 ， 页 
面 显 示 如 图 3.3 所 示 。 
m 
H20 
删除 交 本 
插入 文本 
To learn AJAX, you must be familiar with the XI 
LHttpRequest Object. 
预 格式 文本 。 
它 保留 了 
和 换行 
fori=1to10 


print i 
next i 


视频 讲解 


空格 


图 3.3 ”HTML5(format).html 示意 图 


源 代码 如 下 : 
<head> 
<title> 文 本 格式 化 标签 </title> 
</head> 
<body> 
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m<sup>2</sup><br> 

H<sub>2</sub>O<br> 

<de1> 删 除 文本 </del><br> 

<ins> 插 入 文本 </ins> 

<p>To learn AJAX, you must be familiar with the XM<wbr>LHttpRequest 
Object.</p> 


</pre> 

<pre> 

for i=1 to 10 
print i 

next i 

</pre> 

</body> 


3.3.2 引用 和 术语 定义 标签 


表 3.4 列 出 了 HIML5 引用 和 术语 定义 标签 。 
表 3.4 引用 和 术语 定义 标签 


标 签 描 述 
<abbr> 缩写 
<address> 地 址 
<bdo> 文字 方向 
<blockquote> 长 的 引用 语 
<q> 短 的 引用 语 
<abbr> 标 等 表示 简称 或 缩写 ， 比 如 “IP”， 通 过 对 缩写 进行 标记 ， 能 够 为 浏览 器 、 拼 写 
仁 查 和 搜索 引擎 提供 有 用 的 信息 。 建 议 用户 在 <abbr> 标 签 中 使 用 title 属性 ， 这 样 当 鼠标 指 


针 移动 到 abbr 元 素 上 时 会 显示 简称 的 完整 信息 。 

<address> 标 签 定义 文档 或 文章 的 作者 的 联系 信息 。 在 一 般 情 况 下 ， 如 果 address 元 素 
位 于 body 元 素 内 ， 表 示 文 档 所 有 者 的 联系 信息 ; 如 果 address 元 素 位 于 article 元 素 内 ， 表 
示 作 者 文章 的 联系 信息 。address 元 素 中 的 文本 通常 显示 为 斜体 。 


提示 : address 元 素 通 常 在 footer 元 素 中 使 用 。 


<bdo> 标 签 表示 文字 的 输出 方向 ， 不 是 每 种 文字 都 是 从 左 向 右 的 顺序 ， 比 如 阿拉 伯 文 
是 从 右 向 左 的 。<bdo> 标 签 必须 和 dir 属性 一 起 使 用 ， 不 论 是 什么 文字 ， 都 以 单个 字符 为 单 
位 ， 车 颠倒 顺序 ， 从 右 往 左 显示 ， 可 以 称 为 “ 反 排 效果 ”。 

<blockquote> 和 <q> 标 签 定义 引用 ， 最 好 使 用 cite 属性 ，cite 属性 规定 引用 的 来 源 ， 属 
性 值 是 URL。 
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<blockquote> 标 签 在 浏览 器 中 显示 时 会 在 左 、 定义 地 直 ， 
右 两 边 进行 缩 进 〈 增 加 外 边 距 )。<q> 标 签 用 于 简 > fg 
短 的 行内 引用 ， 在 浏览 器 中 显示 时 会 添加 引号 。 厅 魏 从 弟 : netadningtup. tsinghua. edu. cn 
贺 3.2 HIML5(address)html， 说 明了 如 何 。 外 x 编写, 
在 HTML5 文件 中 写 地 址 ， 如 何 实现 缩写 或 首 字 ”站 本 em WN 
母 缩写 ， 如 何 改变 文字 的 方向 ,页 面 显示 如 图 3.4 


HTIL5 是 万 维 网 的 核心 语言 、 区 用 标 
所 示 。 记 语 言 下 的 一 个 应 用 超 文本 标记 i 

Pr CHTIL) 的 第 五 次 重大 修改 。 
源 代码 如 下 : . 

这 是 短 的 引用 ，“ 百 度 一 下 
<head> 

<title> 引 用 和 术语 定义 标签 </title> 图 3.4 HTML5(address).html 示意 图 

</head> 
<body> 


定义 地 址 : <address> 通 讯 地址 : 清华 大 学 学 研 大 厦 A 座 <br> 
读者 服务 部 (购书 ): (010) 62781733<br> 
网 管 信箱 : netadmin@tup.tsinghua.edu.cn</address><br> 
定义 缩写 : <abbr title="Internet Protocol">IP</abbr><br> 
如 果 浏 览 器 支持 bdo: 
<bdo dir="rtl"> 浏 览 器 </bdo><br> 
这 是 长 的 引用 : 
<blockquote cite="http://baike.baidu.com/link?url=Klkjb3BWg5GnjHyOMD8xM 
39bF1lgQbwixwiCqIcsCtH98Hp9sd oWNPs2w-9rCSo OKZpP-81z4LG912GjUHOHK">HTML 
5 是 万 维 网 的 核心 语言 、 标 准 通 用 标记 语言 下 的 一 个 应 用 超 文本 标记 语言 HTML) 的 第 五 次 重大 修 
改 。</blockquote> 
这 是 短 的 引用 : <q cite="https://www.baidu.com/"> 百 度 一 下 </q> 
</body> 


3.3.3 HTML5 新 增 格式 标签 


表 3.5 列 出 了 HTMLS 新 增 格式 标签 。 
表 3.5 HTML5 新 增 格式 标签 


标 签 描 述 
<mark> 定义 有 记号 的 文本 HTML5 新 标签 ) 
<meter> 定义 预定 义 范围 内 的 度量 (HTMLS5 新 标签 ) 
<progress> 定义 任何 类 型 的 任务 的 进度 (HIMLS 新 标签 
<Tp> 定义 若 浏 览 器 不 支持 mby 元 素 显 示 的 内 容 (HTML5 新 标签 ) 
<rt> 定义 mby 注释 的 解释 (HIML5 新 标签 ) 
<ruby> 定义 mby 注释 (HTMLS5 新 标签 ) 
<time> 定义 日 期 /时 间 (HTML5 新 标签 ) 
@ <mark> 标 签 


<mark> 标 签 定义 带 有 记号 的 文本 ， 表 示 在 页 面 中 需要 突出 显示 或 高 亮 显示 ， 通 常 在 引 
用 原文 时 使 用 ， 以 引起 用 户 的 注意 。mark 元 素 是 对 原文 内 容 起 补充 作用 的 一 个 元 素 , 一 般 
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于 把 内 容重 点 表示 出 来 。<mark> 标 签 最 主要 的 目的 是 引起 当前 用 户 的 注意 ,例如 在 搜索 
引擎 列 出 的 搜索 条 目 中 高 亮 显示 条 目 中 的 关键 字 。 

加 <meter> 标 签 

<meter> 标 签 表示 规定 范围 内 的 数量 值 ， 称 为 gauge〈 尺 度 )， 例 如 磁盘 用 量 、 查 询 结 
果 的 相关 性 等 。 


提示 : <meter> 标 签 不 能 用 于 指示 进度 ( 在 进度 条 中 )。 
meter 元 素 有 6 个 属性 ， 见 表 3.6。 


表 3.6 meter 元 素 的 属性 
属 性 值 描 述 
value number | 必需 ,规定 度量 的 当前 值 。 在 元 素 中 表示 实际 值 ， 该 属性 值 默 认为 0 
规定 范围 的 最 小 值 。 指 定 规定 范围 时 允许 使 用 的 最 小 值 ， 默 认为 0， 值 不 能 小 
于 0 
规定 范围 的 最 大 值 。 指 定 规定 范围 时 允许 使 用 的 最 大 值 ， 如 果 属 性 值 小 于 min， 
那么 把 min 属性 值 视 为 最 大 值 。 默 认为 1 
low number | 规定 被 视 作 低 的 值 的 范围 。 规 定 范围 的 下 限 值 ， 必 须 小 于 或 者 等 于 high 的 值 
规定 被 视 作 高 的 值 的 范围 。 规 定 范围 的 上 限 值 ， 如 果 属 性 值 小 于 low， 那 么 把 
high number | low 属性 值 视 为 high 属性 值 ; 如 果 属 性 值 大 于 max, 那么 把 max 属性 值 视 为 high 
属性 值 


: 规定 范围 的 最 优 值 .属性 值 必须 在 min 属性 值 与 max 属性 值 之 间 , 可 以 大 于 high 
optimum | number 属性 值 


min number 


max number 


low 和 high 可 以 视 为 在 规定 范围 内 〈 最 小 值 和 最 大 值 之 间 ) 的 理想 值 ， 超 出 这 个 范围 
显示 时 用 特定 样式 区 分 。 

@ <progress> 标 签 

<progress> 标 签 代表 一 个 任务 的 完成 进度 ， 进 度 可 以 是 不 确定 的 ， 表 示 进 度 正在 进行 ， 
但 不 清楚 还 有 多 少 工作 量 没有 完成 ， 也 可 以 用 0 到 某 个 最 大 数字 之 间 的 数字 来 表示 准确 的 
进度 情况 。 

progress 元 素 有 两 个 属性 ， 见 表 3.7。 

表 3.7 progress 元 素 的 属性 
描 述 

规定 已 经 完成 多 少 任务 。value 属性 值 必须 大 于 0， 且 小 于 或 等 于 max 属性 值 
规定 任务 一 共 需 要 多 少 工作 。max 属性 值 必须 大 于 0 
加 33 HTML5(progress).html， 说 


明了 如 何在 HTML5 文件 中 使 用 |HTML5 
<progress>、<meter> 和 <mark> 标 签 ， 页 超 文本 标记 语言 CHTIL) 的 第 五 次 重大 修改 。 


面 显示 如 图 3.5 所 示 。 硬盘 存储 占用 到 WCB 
源 代码 如 下 : 硬盘 存储 占用 GB 视频 讲解 


当前 任务 完成 进度 ， 于 昨 昨 蚌 ] 


<head> 


<title>progress、meter 和 mark 


标签 </title> 图 3.5 HTML5(progress).html 示意 图 
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</head> 

<body> 

<h2>HTML5</h2> 

<p> 超 文本 标记 语言 (<mark>HTML</mark>) 的 第 五 次 重大 修改 。</p> 

<p> 硬 盘存 储 占用 <meter value="80" max="100" min="0"></meter>GB</p> 

<p> 硬 盘存 储 占用 <meter value="80" max="100" min="0" low="20" high="70" 

optimum="60"></meter>GB</p> 

<p> 当 前 任务 完成 进度 : <progress max="100" value="50"></progress></p> 

</body> 

@ <ruby> 标 签 

<ruby> 标 签 定义 Ruby 注释 〈 中 文 注 音 或 字符 )。 在 日 本 ， 将 音标 标记 在 文字 上 边 的 印 
刷 方式 叫 作 “Ruby”，<ruby> 标 签 采用 了 日 本 印刷 业 的 这 个 术语 。 

ruby 元 素 由 一 个 或 多 个 字符 (需要 解释 注音 ) 和 一 个 提供 注音 的 区 元素 组 成 ， 还 包括 
可 选 的 外 元素 ， 定 义 当 浏览 嚣 不 支持 ruby 元 素 时 显示 的 内 容 。 

<ruby> 内 容 是 需要 注释 或 注音 标的 文字 。 

<rt> 内 容 是 音标 或 注释 ， 需 要 跟 在 注释 文本 的 后 边 。 

<Ip> 内 容 是 浏览 器 不 支持 ruby 元 素 时 显示 的 ， 主 要 用 来 放置 括 弧 ，<Ip> 默 认 是 不 可 见 的 。 

@ <time> 标 签 

<time> 标 签 表示 公历 的 日 期 或 时 间 , 时 间 和 时 区 偏 移 是 可 选 的 。time 元 素 能 够 以 计算 机 可 

读 的 方式 对 日 期 和 时 间 进 行 编 码 ， 这 样 搜索 引擎 能 够 根据 <time> 标 签 得 到 更 精确 的 搜索 结果 
time 元 素 主 要 有 一 个 属性 ， 见 表 3.8。 


表 3.8 time 元 素 的 属性 


属 性 值 描述 
YYYY-MM-DDThh:mm:ssTZ 
YYYY; 年 
MM: 月 (例如 01 表示 January) 
DD: 大 
datetime T: 分 隔 符 ， 若 规定 时 间 规定 日 期 和 时 间 ， 和 否则 由 元 素 的 内 容 给 定 
hh: 时 
mm: 分 
ss: 秒 
Z: 时 区 标识 符 ， 表 示 使 用 UTC 标准 时 间 


[ 吏 3.4 HTML5SGmuby).html， 说 明了 如 何在 HIMLS 文件 中 使 用 <ruby> 和 <time> 标 签 ， 
页 面 显示 如 图 3.6 所 示 。 


清华 天 学 
关于 学 院 4 月 13 日 讲座 的 通知 


发 布 日 期 : 2018 年 4 月 10 日 
大 家 好 


图 3.6 HTML5(mby).html 示意 图 


源 代 码 如 下 : 


<head> 

<title>ruby 元 素 </title> 
</head> 
<body> 
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<p> 清华 <ruby> 大 <rp> (</rp><rt>da</rt><rp> ) </rp> 学 <rp> (</rp><rt>xue 


</rt><rp>) </rp></ruby></p> 
<article> 
<header> 


<h1> 关 于 学 院 <time datetime="2018-04-13">04 月 13 日 </time> 讲 座 的 通知 </h1> 
<p> 发 布 日 期 :<time datetime="2018-04-10">2018 年 04 月 10 日 </time></p> 


</header> 


</article> 
</body> 


3.4 HTML5 列表 


表 3.9 列 出 了 HTML5 列表 标签 ，HTMLS5 支持 有 序 、 无 序 和 定义 列表 。 
表 3.9 列表 标签 


标 签 


3.4.1 无 序列 表 


无 序列 表 是 一 个 项 目的 列表 ， 每 个 项 目 默 
认 使 用 粗 体 圆 点 进行 标记 。 无 序列 表 用 <ul> 标 
签 定义 , 每 个 列表 项 用 <li> 标 签 定义 ,列表 项 内 
容 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 


他 列表 等 。 


无 序列 表 有 一 个 可 选 属 性 type， 用 来 规定 


列表 里 项 目 符号 的 类 型 ， 但 不 赞成 使 
用 样式 取代 它 。 


， 建 议 


描 述 

有 序列 表 

无 序列 表 

列表 项 

定义 列表 

定义 列表 项 目 
定义 列表 项 目 描述 


无 序列 表 : 


rt 
视频 讲解 


图 3.7 HTML5(ul).html 示意 图 


贺 ]3.5 HIML5GD) html， 使 用 了 无 序列 表 ， 页 面 显示 如 图 3.7 所 示 。 
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源 代码 如 下 : 


<head> 
<title> 无 序列 表 </title> 
</head> 
<body> 
<h2> 无 序列 表 : </h2> 
<ul> 
<1i> 茶 
<ul> 
<1i> 红 茶 </1i> 
<1i> 绿 茶 </1i> 
</ul> 
<ALL 
<1i> 牛 奶 </1i> 
<1i> 咖 啡 </1i> 
</ul> 
</body> 


3.4.2 ”有 序列 表 


表 项 用 <li> 标 


有 序列 表 也 是 项 目 ， 列 表 项 目 使 用 数字 进行 标记 。 有 序列 表 用 <ol> 标 签 定义 ， 每 个 列 
签 定 义 ， 列 表 项 内 容 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 。 
有 序列 表 常 用 两 个 可 选 属性 ，type 用 来 规定 列表 里 项 目 编号 的 类 型 ，start 用 来 规定 起 


始 的 序号 ， 见 表 3.10。 
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属 性 描述 
tat 预定 列表 中 的 起 业 点 


ee 规定 列表 顺序 为 降序 


贺 3.6 HTML5(oD).html， 使 用 了 不 同类 型 的 有 序列 表 ， 页 面 显示 如 图 3.8 所 示 。 

源 代码 如 下 : 

<head> 
<title> 有 序列 表 </title> 

</head> 

<body> 

<O1> 
<1i> 茶 </1i> 
<1i> 牛 奶 </1i> 
<1i> 咖 啡 </1i> 

</o1> 

oUtart= 5 TOVerSod> 
<1i> 茶 </1i> 
<1i> 牛 奶 </1i> 
<1i> 咖 啡 </1i> 


图 3.8 ”HTML5(ol).html 示意 图 
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</o1> 
</body> 


3.4.3 ”定义 列表 


定义 列表 是 项 目 及 其 注释 的 组 合 ， 定 义 列表 以 <dP> 标 签 
开始 ， 每 个 定义 列表 项 以 <dP> 标 签 开 始 ， 每 个 定义 列表 项 的 
描述 以 <dd> 标 签 开 始 ， 在 定义 列表 的 列表 项 内 部 可 以 使 用 段 
落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 。 

加 3.7 HITML5(dD).html， 使 用 了 定义 列表 ， 页 面 显示 如 图 3.9 所 示 。 

源 代码 如 下 : 

<head> 

<title> 定 义 列表 </title> 

</head> 

<body> 

<h4> 一 个 定义 列表 : </h4> 

<qdl> 

<qt> 咖 啡 </dt> 

<qd> 黑 色 的 热饮 料 </dd> 

<dt>Milk</dt> 

<qd> 白 色 的 冷饮 料 </dd> 
</dl> 

</body> 


3.5 ” 叮 叮 书店 首页 内 容 结构 的 建立 


在 制作 一 个 网 页 时 ， 首 先 要 确定 整个 页 面 的 内 容 结构 ， 采 用 先 整 体 后 局 。 视频 讲解 
部 、 自 上 而 下 的 方法 将 页 面 划 分 成 不 同 的 区 域 , 然后 确定 每 一 个 区 域 的 内 容 ， 最 后 完成 一 个 页 


一 个 定义 列表 : 


咖啡 

黑色 的 热饮 料 
Milk 

白色 的 冷饮 料 


图 3.9 HTML5(dl).html 示意 图 


面 文档 内 容 的 结构 化 框架 。 常 见 的 页 面 内 容 结构 如 图 3.10 所 示 ， 下 面 以 制作 叮 叮 书店 首页 为 
例 说 明 整 个 过 程 。 


<header> 
| 


<main> 
<article> <aside> 
<section> 


<footer> 


图 3.10 常见 的 页 面 内 容 结构 示意 图 
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3.5.1 分 析 设 计 页 面 内 容 结构 


整个 页 面 内 容 是 一 个 大 的 容器 ， 可 以 看 成 是 Word 文档 的 一 页 ， 一 般 由 页 眉 、 内 容 和 
页 脚 3 个 区 域 组 成 。 叮 叮 书店 是 一 个 典型 的 由 页 眉 、 内 容 〈 分 为 左边 内 容 区 、 右 边 边栏 区 ) 
和 页 脚 组 成 的 结构 。 

页 眉 由 网 站 logo、 导 航 菜单 、 站 内 搜索 和 购物 车 组 成 ， 如 图 3.11 所 示 。 


特刊 降价 联系 我 们 关于 我 们 


图 3.11 叮 叮 书店 首页 的 页 眉 结 构 示 意图 


页 脚 由 页 脚 导 航 和 版 权 信息 组 成 ， 如 图 3.12 所 示 。 


Copyright (C) 叮 叮 书店 2016-2018, All Rights Reserved | 京 ICP 证 000001 号 音像 制品 经 营 许 可 证 wy 
三 六 把 外 : 洲 从 义学 学 研 杯 厦 4A 计 并 讲 饶 务 廓 包 滞 :( 010) 62781733 万 苹 谷 英 : netadmin@tup.tsinghua.cdu.cn 


图 3.12 ” 叮 叮 书店 首页 的 页 脚 结 构 示 意图 


页 面 主 要 内 容 由 左边 内 容 区 和 右边 边栏 区 组 成 ， 其 中 左边 内 容 区 由 横幅 广告 、 本 周 推 
荐 、 最 近 新 书 和 最 近 促 销 组 成 ， 右 边 边栏 区 由 边栏 广告 、 畅 销 图 书 、 图 书 分 类 、 合 作 伙 伴 
和 关于 书店 组 成 ， 如 图 3.13 所 示 。 


3.5.2 用 HTML5 结构 标签 确定 页 面 内 容 结构 


@ 顶层 结 

首先 建立 文档 内 容 顶 层 结构 。 启 动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html (在 
第 2 章 的 2.5 节 建立 )， 进 入 编辑 区 。 操 作 步 又 如 下 : 

将 光标 定位 到 <body> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<!== 页 眉 ==> 

<header class="container"></header> 

<!-- 导 航 菜单 --> 

<div id="nav"></div> 

<!-- 内 容 --> 

<div id="content-wrapper" class="container"></div> 
<! 一 -页 脚 --> 

<div id="footer-wrapper"></div> 

<! 一 -版 权 信 息 一 > 


<div id="copyright" class="container"></div> 
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久负盛名 的 
Python 入 门 
8) 中 文 版 出 版 以 来， 
过 累计 销量 超 20 万 内! 
针对 Python 3 重 磅 升级 Br 
oeeo0o 
局 本 周 淮 大 的 时 图 书 
《HTML5 权 成 后 南 } 四 #33 ldeep learning] 
作为 下 一 代 Web 标 准 , 到 力 于 为 互联 网 开发 者 汉奸 更 加 。 加 Hadoop 可 二 后 十 : 大 吾 反 的 本 情 与 分 析 综 4 有 
便 竺 、 开 放 的 沟通 平台 。 业 界 若 这 认 为 ， 在 未 来 几 年 内 ，[TIIEG 无 
晤 汪 成 为 移动 互联 网 领 的 主 宁 覃 。 本 书 是 系统 和 习 网 页 设计 和 节 动 图 和 Bt 起 PPT 第 3 
WH 日 Re>3wksiRsl 
Adam Freeman ， 冒 在 多 计 名 企 担任 高级 职务 ， 现 为 条 稍 法 本 


韦 作家 ， 委 有 多 艺 C#、JNET 和 java 方面 的 大 莉 头 作曲 。 其 中 
《ASP.NET 4 高 级 程序 设 计 ( 第 4 版 ) 》、《 精 通 ASPJNET MVC 3 杠 
架 (第 3 版 ) 》 枯 且 均 在 同 品种 中 侣 列 前 生 ， 备 受 这 者 推 安 ，Freeman 


Java5cript 程 序 员 心中 的 《圣经 》. 

David Flanagan , 是 一 名 程序 员 , 也 是 一 各 作家 。 他 在 O”Reily 
出 质 的 其 他 精简 书 还 包括 《javaScript Pocket Reference》、 《The 
Ruby Programming Language》 以 及 《Java in a Nutshel》 » 
David 毕 业 于 亲 守 理工 学 陆 ， 获 得 计 算 机 科学 与 工程 学 位 他 委 子 
孩子 一 起 生 舌 在 西田 和 盟 可 华 之 网 的 美国 太平 尝 西北 天 埋 . 


区 最 这 新 书 


《HTML5*CSS3 从 入 门 到 精通 》 {MWebiait} 


Las.css 和 


ee ec 


响应 式 Web 设 计 


HTTMLS 和 CSS3 实 


% 弛 促销 
《HTML5 和 CS53 交 便 数 程 》 


(avascript 权 威 撒 十》 


omaur 目 


目 gxtss 理 ii 与 应 用 


国 图 书 分 类 合作 伙伴 
专 站 为 网 开发 新 手 和 网 现 设计 策 打 和 的 经 次 参考 必 ,这 本 书 村 天 作 。 [| 国志 分 St 
者 的 一 笋 风 赂 ， 呈 夭 风 惠 、 简 约 敌 阁 、 下 回 性 强 , 星 广 大 Web 开 发 人 病 生 计 中 国电 子 丙 务 研究 中 心 
员 的 心 读经 典 . 数 案 库 清华 大 学 出 版 社 
桥 形 加 像 中 国人 民 大 学 出 版 社 
EC 网 页 提 作 中 国 社会 科学 由 上 福 
考试 证 
《JavaScript 权 威 掉 南 》 
经 典 的 JavaScript 工 具 书 , 从 1996 年 以 来 ,本 书 已 和 成 为 国 关于 上 


叮 叮 书店 成 立 于 2010 年 6 月 , 是 由 教育 部 主管 、 
清华 大 学 主办 的 综合 出 版 单位 ， ”这 座 
久生 要 名 的 高 等 学 府 ， 委 承 清 人 人 “自强 不 息 , 厚 德 
要 物 ” 的 人 文 捕 神 、 


图 3.13 叮 叮 书店 首页 的 内 容 结构 示意 图 


提示 : id 和 class 属性 不 仅仅 是 区 分 元 素 的 标识 ， 更 是 为 以 后 的 样式 和 脚本 准备 的 ，id 


表示 唯一 ， 体 现 个 性 ，class 是 一 类 ， 体 现 共性 。id 和 class 属性 值 最 好 能 见 名 知 意 。 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


@ 分 层 结构 
然后 自 上 而 下 建立 分 层 结构 。 操 作 步 骤 如 下 : 
1) 页 眉 


将 光标 定位 到 <header class="container"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 ; 


<!-- 网 站 1ogo--> 
<div id="logo"></div> 


<!-- 站 内 搜索 --> 
<div id="search"></div> 
2) 导航 菜单 


将 光标 定位 到 <div id="nav"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<nav class="container"> 


<!-- 购 物 车 --> 

<div id="cart"></div> 
</nav> 
3) 内 容 


将 光标 定位 到 <div id="content-wrapper" class="container"> 的 后 面 ， 按 回 车 键 ， 输 入 下 
面 的 代码 : 


<!-- 左 边 内 容 区 --> 


<main> 
<!- -横幅 广 告 --> 
<div id="adv"></div> 
<!-- 本 周 推荐 --> 


<section id="recommend"> 
<section class="recommend-book"></section> 
<section class="recommend-book"></section> 
</section> 
<!-- 最 近 新 书 --> 
<section id="new"> 
<div class="content"> 
<section class="book"></section> 
<section class="book"></section> 


</div> 
</section> 
<! 一 -最 近 促 销 --> 


<section id="sales"> 
<div class="content"> 
<section class="book"></section> 


<section class="book"></section> 


</div> 
</section> 
</main> 
<! 一 右边 边栏 区 -> 
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<aside> 
<!-- 边 栏 广告 --> 
<div id="advert"></div> 
<!- -畅销 图 书 --> 


<section id="best-selling"></section> 


<div id="classify-partner"> 


<1== 图 书 分 类 ==> 
<section id="classify"></section> 
< 合作 伙伴 三 > 
<section id="partner"></section> 
</div> 
<!== 关 于 书店 ==> 
<section id="about"></section> 
</aside> 
4) 页 脚 
将 光标 定位 到 <div id="footer-wrapper"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<!-- 页 脚 导航 --> 


<footer class="container"></footer> 


3.5.3 添加 文本 内 容 


@ 页 由 文本 
1) 网 站 logo 
将 光标 定位 到 <div id="logo"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<h1> 叮 叮 书店 </h1> 
2) 导航 菜单 
将 光标 定位 到 <nav class="container"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<ul> 
<1i> 首 页 </1i> 
<1i> 书 籍 分 类 </1i> 
<1i> 特 刊 降价 </1i> 
<1i> 联 系 我 们 </1i> 
<1i> 关 于 我 们 </1i> 
</ul> 


提示 : 在 组 织 菜单 或 链接 等 并 列 文 本 时 一 般 采 用 无 序列 表 。 
@ 内容 文 本 


1) 本 周 推荐 
将 光标 定位 到 <section id="recommend"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h2> 本 周 推荐 </h2> 
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从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案 例 开发 (第 2 版 ) 
将 光标 定位 到 第 1 个 <section class="recommend-book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 
的 代码 : 


<h3>《HTML5 权威 指南 》</h3> 
<div class="content"> 


<div class="cover"></div> 
<div class="description"> 
<p> 作 为 下 一 代 Web 标准 , <mark>HTML5</mark> 致 力 于 为 互联 网 开发 者 搭建 更 加 便捷 、 
开放 的 沟通 平台 。 业 界 普遍 认为 ， 在 未 来 几 年 内 ，<mark>HTML5</mark> 无 疑 将 成 为 移 
动 互联 网 领域 的 主宰 者 。 本 书 是 系统 学 习 网 页 设计 和 移动 设计 的 参考 图 书 。</p> 
<p>Adam Freeman， 曾 在 多 家 名 企 担 任 高 级 职务 ， 现 为 畅销 技术 图 书 作 家 ， 著 有 多 部 
C#、.NET 和 Java 方面 的 大 部 头 作品 。 其 中 《ASP .NET4 高 级 程序 设计 (第 4 版 )》、《 精 
通 ASP.NET MVC 3 框架 (第 3 版 )) 销 量 均 在 同 品种 中 名 列 前 茅 , 备 受 读者 推崇 。Freeman 
专门 为 网 页 开发 新 手 和 网 页 设计 师 打 造 的 经 典 参考 书 ， 这 本 书 秉 承 作 者 的 一 贯 风格 ， 幽 默 
风趣 、 简 约 凝 练 、 罗 辑 性 强 ， 是 广大 Web 开发 人 员 的 必 读 经 典 。</P> 
</div> 
</div> 
<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 


将 光标 定位 到 第 2 个 <section class="recommend-book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 
的 代码: 


<h3>《JavaScript 权威 指南 》</h3> 
<div class="content"> 
<div class="cover"></div> 
<div class="description"> 
<p> 经 典 的 Javascript 工具 书 ， 从 1996 年 以 来 ， 本 书 已 经 成 为 Javascript 程序 员 
心中 的 《圣经 》。</p> 
<p>David Flanagan， 是 一 名 程序 员 ， 也 是 一 名 作家 。 他 在 0”Reilly 出 版 的 其 他 畅 
销 书 还 包括 Javascript Pocket Reference、 The Ruby Programming Language 
以 及 Java in a Nutshe11。David 毕业 于 麻 省 理工 学 院 ， 获 得 计算 机 科学 与 工程 学 位 。 
他 和 妻子 、 孩 子 一 起 生活 在 西雅图 和 温哥华 之 间 的 美国 太平 洋 廿 北海 岸 。</p> 
</div> 
</div> 
<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 


2) 最 近 新 书 

将 光标 定位 到 <section id="new"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<h2> 最 近 新 书 </h2> 

将 光标 定位 到 第 1 个 <section class="book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码: 


<h3>《HTML5+CSS3 从 入 门 到 精通 》</h3> 
<div class="effect-1"> 
<div class="image-box"></div> 
<div class="text-desc"> 
<h3>《HTML5+CSS3 从 入 门 到 精通 》</h3> 
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<p>《<mark>HTML5</mark>+CSS3 从 入 门 到 精通 》 通 过 基础 知识 + 中 小 实例 + 综合 
案例 的 方式 , 讲述 了 用 <mark>HTML5</mark>+CSS3 设计 构建 网 站 的 必 备 知识 , 相 
对 于 权威 指南 、 高 级 程序 设计 、 开 发 指南 同类 图 书 ， 本 书 是 一 本 适合 快速 入 手 的 自学 
教程 。</p> 
<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 
</div> 
</div> 


将 光标 定位 到 第 2 个 <section class="book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h3>《 响 应 式 Web 设计 》</h3> 
<div class="effect-1"> 


<div class="image-box"></div> 

<div class="text-desc"> 
<h3>《 响 应 式 Web 设计 》</h3> 
<p>《 响 应 式 Web 设计 : <mark>HTML5</mark> 和 CSS3 实战 》 将 当前 Web 设计 中 热门 
的 响应 式 设 计 技 术 与 <mark>HTML5</mark> 和 CSS3 结合 起 来 ， 为 读者 全 面 深入 地 讲解 
了 针对 各 种 屏幕 大 小 设计 和 开发 现代 网 站 的 各 种 技术 。《 响 应 式 Web 设计 : <mark>HTML5 
</mark> 和 CSS3 实战 》 适 合 各 个 层次 的 Web 开发 和 设计 人 员 阅 读 。</P> 
<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 

</div> 

</div> 


3) 最 近 促 销 

将 光标 定位 到 <section id="sales"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<h2> 最 近 促 销 </h2> 

将 光标 定位 到 第 1 个 <section class="book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h3> 《HTML5 和 css3 实例 教程 》</h3> 
<div class="effect-1"> 

<div class="image-box"></div> 

<div class="text-desc"></div> 

<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 
</div> 


将 光标 定位 到 第 2 个 <section class="book"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h3>《JavaScript 权威 指南 》</h3> 
<div class="effect-1"> 

<div class="image-box"></div> 

<div class="text-desc"></div> 

<div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 
</div> 


4) 畅销 图 书 
将 光标 定位 到 <section id="best-selling"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h2> 畅 销 图 书 </h2> 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


< 
<1i> 深 度 学 习 [deep learning] 
<div class="curr"> 


<div class="p-img"></div> 
<div class="p-name"> 深 度 学 习 [deep learning]<strong>¥43.50 
</strong><del>¥52.00</del></div> 
</div> 
</1i1> 
<1i>Hadoop 权威 指南 : 大 数据 的 存储 与 分 析 (第 4 版 ) ， 累 计 销 量 超 过 10 万 册 
<div class="curr"> 
<div class="p-img"></div> 
<div class="p-name">Hadoop 权威 指南 : 大 数据 的 存储 与 分 析 (第 4 版 )， 累 计 
销量 超过 10 万 册 <strong>¥43.50</strong><del>¥52.00</del></div> 
</div> 
</1i> 
<1i> 和 秋 叶 一 起 学 PPT 第 3 版 
<div class="curr"> 
<div class="p-img"></div> 
<div class="p-name"> 和 秋 叶 一 起 学 PPT 第 3 版 <strong>¥43.50</strong> 
<del>¥52.00</del></div> 
</div> 
</1i> 
<1i > 深度 学 习 优化 与 识别 
<div class="curr"> 
<div class="p-img"></div> 
<div class="p-name"> 深 度 学 习 优 化 与 识别 <strong>¥43.50</strong> 
<del>¥52.00</del></div> 
</div> 
</1i> 
<1i> 区 块 链 原 理 、 设 计 与 应 用 
<div class="curr"> 
<div class="p-img"></div> 
<div class="p-name"> 区 块 链 原理 、 设 计 与 应 用 <strong>¥43.50</strong> 
<del>¥52.00</del></div> 
</div> 
</1i> 
</ul> 


5) 图 书 分 类 
将 光标 定位 到 <section id="classify"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h2> 图 书 分 类 </h2> 

<ul> 
<1i> 编 程 语言 </1i> 
<1i> 数 据 库 </1i> 
<1i> 图 形 图 像 </1i> 
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<1i> 网 页 制作 </1i> 
<1i> 考 试 认 证 </1i> 
</ul> 
6) 合作 伙伴 
将 光标 定位 到 <section id="partner"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<h2> 合 作 伙伴 </h2> 
<ul> 
<1i> 中 国电 子 商 务 研究 中 心 </1i> 
<1i> 清 华 大 学 出 版 社 </1i> 
<1i> 中 国人 民 大 学 出 版 社 </1i> 
<1i> 中 国 社会 科学 出 版 社 </1i> 
</ul> 
7) 关于 书店 
将 光标 定位 到 <section id="about"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<h2> 关 于 书店 </h2> 
<p> 叮 叮 书店 成 立 于 2010 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综合 出 版 单位 ， 植 根 于 “ 清 
华 ” 这 座 久负盛名 的 高 等 学 府 ， 乘 承 清华 人 “自强 不 息 ， 厚 德 载 物 ” 的 人 文 精神 。</p> 


图 页 脚 文本 
将 光标 定位 到 <footer class="container"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<ul> 
<1i> 首 页 </1i> 
<1i> 关 于 我 们 </1i> 
<1i> 服 务 条 款 </1i> 
<1i> 隐 私 策略 </1i> 
<1i> 联 系 我 们 </1i> 
</ul> 


@ 版 权 信 息 文本 

将 光标 定位 到 <div id="copyright" class="container"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<div>Copyright (C) 叮 叮 书店 2016-2018，R11 Rights Reserved | 京 ICP 证 000001 
号 音像 制品 经 营 许可 证 </div> 


<address> 通 讯 地 址 : 清华 大 学 学 研 大 厦 A 座 读者 服务 部 snbsp;gnbsp; 电话 : (010) 
62781733&nbsp; gnbsp; 网 管 信箱 : netadmin@tup.tsinghua.edu.cn</address> 


3.5.4 在 浏览 器 中 预览 


将 鼠标 指针 移 到 WebStorm 主编 辑 区 ， 在 弹出 的 主流 浏览 器 工具 栏 中 单 击 Google 
Chrome 图 标 按钮 进行 预览 ， 预 览 效果 如 图 3.14 所 示 。 
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从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 〈 第 2 版) 


本 周 推荐 
《HTML5 权 威 指南 》 
作为 下 一 代 Web 标 准 ， HTMES ee 开放 的 沟通 平台 。 业 | 
界 普 饥 认 为 ， 在 未 来 几 年 内 ， 无 颖 将 成 为 移动 互联 网 领域 的 主宰 者 。 本 书 是 系统 
和 


Adam Freenan, 入 证 间 家 名 全 担任 总 级 职务 , 人 jb 
pe 的 大 部 头 作品 。 其 中 《第 癸 ) 2 < 精通 

VC 3 框架 (第 3 版 ) 和 
和 的 经 典 参考 书 ， 和 的 时 风趣 
未 辑 性 强 ， 是 广大 Neb 开发 人 员 的 必 读 经 芝 


加 入 购物 车 详细 内 容 
《JavaScript 权 威 指南 》 
er 从 1995 年 以 来 ， 本 书 已 经 成 为 Javascript 程 序 员 心 中 的 《 圣 


David Flanagan， 是 一 名 程序 员 ， 也 是 一 名 作家 。 他 在 0” ae 二 和 | 
插 《JavaScript Pocket Reference>》 、 he Ruby Programming Language》 

《Java in a Nutshell》。David 毕 业 于 | 和光 他 
和 雪子、 和 平 洋 西北 海岸 。 


加 入 购物 车 详细 内 容 

最 近 新 书 

《HTML5+CSS3 从 入 门 到 精通 》 

《HTML5+CSS3 从 入 门 到 精通 》 

《TWES :CSS3 从 入 门 到 精通 》 通 过 基础 知识 + 中 小 实例 + 综合 案例 的 方式 ， 讲 述 了 用 


HTML5 +CSS3 设 计 构 建 网 站 的 必 备 知识 ， 相 对 于 权威 指南 、 高 级 程序 设计 、 开 发 指南 同类 
图 书 ， 本 书 是 一 本 适合 快速 入 手 的 自学 教程 。 


加 入 购物 车 详细 内 容 


内 


图 3.14 叮 叮 书店 


3.6 


本 章 介绍 了 HIMLS 乡 
了 文本 格式 化 标签 ， 
结构 的 过 程 。 


小 结 


3.7 习题 


《JavaScript 权 威 指南 》 

加 入 购物 车 详细 内 容 
畅销 图 书 

。 深度 学 习 [deep learnine] 

沫 度 学 习 [deep learnine] 站 

(第 星 )， 果 计 和 销量 起 过 10 万 贡 
人 析 (第 癸 )， 累 计 博 重 超过 10 万 册 半 43. 50 千 52-99| 
me pd I ¥ 43. 50¥52-68 


合作 伙伴 


。 中 国 社会 科学 出 版 社 


关于 书店 


叮 叮 书店 成 立 于 2010 年 6 月， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综合 出 版 单位 ， 植 根 于 “ 清 
华 ” 这 座 久 负 盛名 的 高 等 学 奉 ， 村 间 清华 人 “自强 不 息 ， 原 和 戟 物 ” 的 人 文 精神 。 


Se (C) 叮 叮 书店 2016-2018，Al1 Rights Reserved | 京 1CP 证 000001 号 音像 制品 经 
许可 证 


如 丽 培 姐 : 宇 华 大 学 学 妨 厌 厦 4 夺 主动 展 季 晰 电话 《010) 63781733 网 窗 褒 前: 


结构 标签 元 素 ， 详 细 讲 述 了 HIML5 
重点 介绍 了 HTML5 列表 ， 并 通过 叮 叮 书店 首页 说 明了 


netaduingtup. tsinghua. ed cn 


常用 的 基本 元 素 ， 简 单 介 绍 
建立 页 面 内 容 


@ 远 择 题 

(1) 在 下 面 的 标签 中 ，( 
A. <br> B. <break> 

(2) 在 HIML5 中 ， 注 释 标签 是 ( 
二 B; 

(3) 在 HTML5 中 ， 列 表 不 包括 〈 
A. 无 序列 表 ”B. 有 序列 表 

(4) 在 HIMLS 文档 中 ,使 用 ( 


D 


/*/ 


)。 


)。 


) 是 HTML5 新 增 的 标签 。 


C. <header> D. <head> 
CH Ds " 
C. 定义 列表 D. 公用 列表 


) 标签 标记 定义 列表 。 
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A. <ol> B. <ul> C. <dl> D. <list> 
(5) 在 下 面 的 标签 中 ，( ”) 是 通用 标签 。 

A. <span> B. <p> C. <ol> D. <pre> 
四 简 答题 


(1) 元 素 显示 时 默认 是 一 个 块 元 素 和 默认 是 一 个 行内 元 素 有 什么 区 别 ? 
(2) HIMLS 基础 标签 有 哪些 ? 

(3) 列表 元 素 有 哪 几 类 ? 怎么 使 用 ? 

(4) <article> 和 <section> 有 什么 区 别 ? 

(5) 写 出 常见 的 页 面 内 容 组 成 结构 标记 代码 。 
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超 链接 即 超 文本 ， 是 指 从 一 个 网 页 的 信息 节点 指向 一 个 目标 的 链接 关系 ， 当 浏览 者 单 
击 信息 节点 时 ， 链 接 目标 将 显示 在 浏览 器 上 ， 并 且 根 据 目标 的 类 型 来 打开 或 运行 。 本 章 首 
先 详细 介绍 HTML5 超 链接 标签 <a>, 接 下 来 简单 介绍 HTML5 字符 集 与 颜色 , 最 后 介绍 如 
何在 叮 叮 书 店 首页 使 用 超 链 接 。 

本 章 要 点 : 

如 HIML5 中 的 <a> 标 签 。 

妇 HIML5 中 的 字符 集 与 颜色 。 


4.1 <a> 标 签 


a 是 锚 〈anchor) 的 缩写 ， HTML5 使 用 <a> 标 签 实现 信息 节点 与 目标 的 超 链 接 ， 链 接 
目标 可 以 是 另 一 个 网 页 , 也 可 以 是 相同 网 页 上 的 不 同位 置 , 还 可 以 是 图 片 、 电 子 邮 件 地 址 、 
文件 或 者 应 用 程序 。 

在 所 有 浏览 器 中 ，<a> 标 签 通 过 外 观 与 其 他 元 素 相 区 别 ， 超 链接 的 默认 外 观 是 未 被 访 
问 的 链接 带 有 下 画 线 而 且 是 蓝 色 的 ， 已 被 访问 的 链接 带 有 下 画 线 而 且 是 紫色 的 ;活动 链接 


带 有 下 画 线 而 且 是 红色 的 。 
<a> 标 签 的 常用 属性 见 表 4.1。 
表 4.1 <a> 标 签 的 常用 属性 
属 性 描述 
href 链接 目标 URL 
全 规定 在 何 处 打开 链接 文档 。 其 中 ，_blank 在 新 窗口 中 打开 被 链接 


文档 ; _self 为 默认 ， 指 在 相同 的 窗口 中 打开 被 链接 文档 
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4.1.1 href 属性 


通过 使 用 href 属性 可 以 创建 指向 另外 一 个 文档 的 链接 ， 用 法 如 下 : 
<a href="url"> 显 示 的 文本 或 图 像 </a> 


<a> 用 来 创建 链接 , href 属性 指定 需要 链接 文档 的 目标 位 置 , 开始 标签 和 结束 标签 之 间 
的 文本 或 图 像 被 作为 超 链接 来 显示 。 
下 面 定 义 了 指向 清华 大 学 的 链接 : 


<a href="http://www.tsinghua.edu.cn/"> 清 华 大 学 </a> 


链接 是 否 正 确 与 href 属性 值 有 关 ，href 属性 定义 了 链接 目标 的 文档 路 径 。 文 档 路 径 的 
类 型 一 共有 两 种 ， 即 绝对 路 径 和 相对 路 径 ， 其 中 相对 路 径 又 分 为 根 相 对 路 径 和 文档 相对 
路 径 。 

如 果 要 链接 的 文档 在 站 点 之 外 ， 必 须 使 用 绝对 路 径 。 

绝对 路 径 是 包括 通信 协议 名 、 服 务 器 名 、 路 径 及 文件 名 的 完全 路 径 。 例 如 链接 清华 大 
学 信息 科学 技术 学 院 首页 ， 绝 对 路 径 是 “http://www .sist.tsinghua.edu.cn/docinfo/index.jsp”。 
如 果 站 点 之 外 的 文档 在 本 地 计算 机 上 ， 比 如 链接 FF 盘 中 book_store 目录 下 的 defaulthtml 
文件 ， 那 么 它 的 路 径 就 是 “file:WF:/book store/defaulthtml”， 这 种 完整 地 描述 文件 位 置 的 
路 径 也 是 绝对 路 径 。 

如 果 要 链接 当前 站 点 内 的 文档 ， 需 要 使 用 相对 路 径 ， 相 对 路 径 包 括 根 相 对 路 径 和 文档 
相对 路 径 两 种 ， 一 般 多 用 文档 相对 路 径 。 

根 相 对 路 径 的 根 是 指 本 站 点 文件 夹 〈 根 目录 )， 根 相对 路 径 以 “/” 开 头 ， 路 径 是 从 当 
前 站 点 的 根 目录 开始 计算 。 比 如 一 个 网 页 链接 或 引用 站 点 根 目 录 下 的 images 目录 中 的 图 像 
文件 a.gif， 用 根 相 对 路 径 表 示 就 是 “/images/a.gif”。 

文档 相对 路 径 是 指 包 含 当前 文档 所 在 的 文件 夹 ， 也 就 是 以 当前 文档 所 在 的 文件 夹 为 基 
础 开始 计算 路 径 。 如 果 当 前 网 页 所 在 位 置 为 “F:\book storemusic”， 那 么 “ahtml” 就 表示 
“下 :\book_store\music\a.html” 页 面 文件 ，“../b.html” 就 表示 “F:\book_store\b.html” 页 面 文 
件 ， 其 中 “../” 表 示 当 前 文件 夹 的 上 一 级 文件 夹 。 如 果 在 站 点 根 目录 中 一 个 网 页 需 链接 或 
引用 站 点 根 目 录 下 images 目录 中 的 图 像 文件 a.gif, 用 文档 相对 路 径 表 示 就 是 “images/a.gif”。 

链接 的 目标 文档 可 以 是 任意 类 型 的 文件 ， 如 果 浏 览 器 能 够 处 理 ， 则 在 浏览 器 上 打开 显 
示 ， 和 否则 浏览 器 提示 下 载 、 保 存 文件 。 


4.1.2 target 属性 


被 链接 页 面 通常 显示 在 当前 浏览 器 窗口 中 ， 若 使 用 了 target 属性 ， 值 为 “blank”， 可 
以 在 新 的 窗口 中 打开 。 其 用 法 如 下 : 


<a href="url" target=" blank"> 显 示 的 文本 或 图 像 </a> 
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4.1.3 


标记 文档 内 音 


中 书签 指定 位 置 的 链接 ， 这 样 使 / 
指定 位 置 目标 的 方式 


<a id="label"></a> 


label 是 书签 的 名 字 ， 


在 使 用 时 区 分 大 小 写 。 


创建 指向 书签 的 链接 需要 两 个 步骤 : 


(1) 在 需要 的 位 置 定 


<a id="cl2"></a> 


义 书签 。 


(2) 在 指定 位 置 建立 和 书签 的 链接 。 


<a href="#c12"> 第 12 章 </a> 


在 建立 和 书签 的 链接 时 ，href 属性 值 的 书签 名 字 前 需 加 “#” 号 。 


er 


书签 经 常 被 用 在 长 文档 中 创建 目录 ， 可 以 为 每 个 章节 
然后 将 链接 到 这 些 书签 的 链接 标签 置 于 文档 的 上 部 。 


[ 圆 41 HTML5(a) html， 说 明了 <a> 标 签 的 基本 用 法 ， 如 图 4.1 所 示 。 


源 代码 如 下 : 


<head> 


<title> 超 链接 </title> 


</head> 
<body> 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


id 属性 


通过 使 用 id 属性 可 以 创建 一 个 网 页 内 部 的 书签 , 在 使 月 


书签 时 可 以 创建 直接 跳 至 页 面 


赋予 一 个 书签 ， 


者 就 无 须 不 停 地 滚动 页 面 来 寻找 需要 的 信息 ， 这 种 用 于 
也 称 为 “ 锚 ”。 其 用 法 如 下 : 


视频 讲解 


站 点 内 页 面 的 链接 : <a href="HTML5 (dl) .html"> 定 义 列表 </a><br> 

站 点 外 网 站 的 链接 : <a href="http://www.tsinghua.edu.cn/"> 清 华 大 学 </a><br> 
其 他 类 型 文件 链接 : <a href="multimedia/other.amr"> 其 他 类 型 文件 </a><br> 
邮件 链接 : <a href="mailto:333fff3f@163.com"> 发 送 邮 件 </a><br> 


使 用 书签 链接 到 同一 个 页 面 的 不 同位 置 : 


<h2> 第 1 章 </h2> 
<p> 在 一 个 漆黑 的 白天 ， 
<h2> 第 2 章 </h2> 
<p> 在 一 个 漆黑 的 白天 ， 
<h2> 第 3 章 </h2> 
<p> 在 一 个 漆黑 的 白天 ， 


<a id="c1l2"></a> 
<h2> 第 12 章 </h2> 
<p> 在 一 个 漆黑 的 白天 ， 
<h2> 第 13 章 </h2> 
<p> 在 一 个 漆黑 的 白天 ， 


有 个 年 轻 的 老头 拿 了 把 生 了 锈 的 菜刀 。 


有 个 年 轻 的 老头 拿 了 把 生 了 锈 的 菜刀 。 


有 个 年 轻 的 老头 拿 了 把 生 了 锈 的 菜刀 。 


有 个 年 轻 的 老头 拿 了 把 生 了 锈 的 菜刀 。 


有 个 年 轻 的 老头 拿 了 把 生 了 锈 的 菜刀 。 


<a href="#c12"> 查 看 第 12 章 </a> 


</p> 


</p> 


</p> 


</p> 


</p> 
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</body> 

单 击 【其 他 类 型 文件 】 链 接 ， 由 于 浏览 器 不 能 直接 处 理 该 类 型 的 文件 ， 会 出 现 【 文 件 
下 载 】 对 话 框 ， 如 图 4.2 所 示 ， 此 时 用 户 可 以 单 击 【 打 开 】 或 【保存 】 按 钮 对 文件 进行 
处 理 。 


您 起 打开 或 保存 此 文件 吗 ? 
站 点 内 页 面 的 链 的 第 一 个 页 面 0 ther ur 
ee ST 
其 他 类 型 文件 链接 ， 其 他 类 型 文件 : 


打开 @) 保存 G) ] [到 省 


回 打开 此 关 文件 前 总 是 询问 @) 


© 和 


发 送 邮 件 
使 用 书 共 链接 到 同一 个 页 面 的 不 同位 置 ， 查 12 章 


第 1 章 
在 一 个 漆黑 的 白天 ， 有 个 年 轻 的 老头 拿 了 把 上 了 锈 的 菜刀 。 


图 4.1 HTML5(a).html 示意 图 图 4.2 【文件 下 载 】 对 话 框 


提示 : 假如 将 链接 地 址 写 为 “http://www.tsinghua.edu.cn”， 浏 览 器 会 向 服务 器 发 出 两 
次 HTTP 请 求 ， 所 以 不 要 省 略 “/”， 应 该 写 为 “http://www.tsinghua.edu.cn/”。 如 果 链 接地 
址 的 最 后 是 文件 名 ， 要 省 略 “/”"， 就 像 “http://www.sist.tsinghua.edu.cn/docinfo/index.jsp”。 


4.2 ”HTML5 字符 集 与 颜色 


4.2.1 HTML5 字符 集 


如 果 要 正确 地 显示 HTML5 页 面 ， 浏 览 器 必须 知道 使 用 何 种 字符 集 。 

Web 早期 使 用 的 字符 集 是 ASCIT， 现 代 浏 览 器 默认 的 字符 集 是 ISO-8859-1，ISO 字符 
集 是 国际 标准 组 织 (ISO)〉 针 对 不 同 的 字母 表 /语言 定义 的 标准 字符 集 。 

由 于 ISO 字符 集 有 容量 限制 ， 而 且 不 兼容 多 语言 环境 ，Unicode 联盟 开发 了 Unicode 
标准 。Unicode 标准 涵盖 了 世界 上 的 所 有 字符 、 标 点 和 符号 ， 最 常用 的 编码 方式 是 UTF-8 
和 UTF-16，UTF-8 是 网 页 和 电子 邮件 的 首选 编码 ，UTF-16 主要 用 于 操作 系统 和 软件 开发 
环境 中 。HTML5 支持 UTF-8 和 UTF-16。 

如 果 网 页 使 用 不 同 于 ISO-8859-1 的 字符 集 ， 应 在 <meta> 标 签 中 进行 指定 。 


4.2.2 HTML5 字符 实体 


ISO-8859-1 的 大 部 分 字符 都 有 名 称 ， 字 符 的 名 称 有 两 种 表示 方式 ， 即 字符 名 称 和 字符 
编号 。 字 符 名 称 由 名 称 和 一 个 分 号 (;) 组 成 ， 名 称 对 大 小 写 敏感 ; 字符 编号 由 # 编号 (十 
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进 制 数 ) 和 一 个 分 号 〈;) 组 成 ， 如 果 编 号 是 十 六 进 制 数 ， 需 要 在 十 六 进 制 数 字 前 加 “x”。 
通过 字符 名 称 和 字符 编号 引用 的 字符 称 为 字符 实体 ， 字 符 实体 表示 需要 在 字符 名 称 和 
字符 编号 前 加 和 号 (&)。 

一 些 字符 在 HTML5 中 拥有 特殊 的 含义 ， 比 如 小 于 号 (<) 用 于 定义 HTML5 标签 ， 如 
果 用 户 希 望 浏览 器 正确 地 显示 这 些 字符 ， 必 须 在 HTMLS5 源 代码 中 插入 字符 实体 。 如 果 要 


在 HTMLS 文档 中 显示 小 于 号 ， 需 要 写 为 “&lt” 或者“&y60:”。 最 常用 的 字符 实体 见 表 42。 
表 4.2 最 常用 的 字符 实体 


- 些 字符 不 容易 通过 键盘 输入 ， 如 果 使 用 这 些 符号 也 必须 在 HIMLS 源 代码 中 插入 字 
符 实体 。 其 他 一 些 常用 的 字符 实体 见 表 4.3。 
表 4.3 ”其 他 一 些 常用 的 字符 实体 
实体 编号 
&#162; 
#163; 
&#165; 
&#167; 
&e#169; 
Ge#174; 
#215; 
Ee#247; 


空格 是 HTML5 中 最 普通 的 字符 实体 。 在 通常 情况 下 ，HTMLS5 会 去 掉 文档 中 的 空格 。 
例如 在 文档 中 连续 输入 10 个 空格 ， 那 么 HTMLS5 会 去 掉 其 中 的 9 个 。 如 果 使 用 空格 实体 
“&nbsp;”， 那 么 就 可 以 在 文档 中 增加 空格 。 


4.2.3 HTML5 颜色 
颜色 由 红色 、 绿 色 、 蓝 色 混合 而 成 。 颜 色 值 由 一 个 # 号 和 6 位 十 六 进 制 数 表示 ，6 位 十 
六 进 制 数 由 红色 、 绿 色 和 蓝 色 的 值 组 成 (RGB)， 每 种 颜色 的 最 小 值 是 00 (十 进 制 数 0)， 


最 大 值 是 FF( 十 进 制 数 235), 例如 黑 ( 拓 00000)、 红 ( 考 F0000)、 绿 C#OOFF00)、 蓝 (#OOOOFF)、 
黄 〈 帮 FFF00)、 灰 (#C0C0C0)、 白 (#FFFFFF)。 


4.2.4 HTML5 颜色 名 


一 共有 16 种 颜色 名 被 W3C 的 HIMLS 标准 所 支持 , 它们 是 aqua、 black、 blue、 fuchsia、 
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gray、 green、 lime、 maroon、 navy、olive、purple、 red、silver、teal、white、yellow。 


如 果 用 户 要 使 用 其 他 的 颜色 ， 需 要 使 用 十 六 进 制 的 颜色 值 。 


4.3 ” 叮 叮 书店 首页 超 链接 的 使 用 > 


叮 叮 书店 除了 建立 首页 (index.html) 外， 还 需要 建立 书籍 分 类 页 面 (categoryhtml)、 
特刊 降价 页 面 (specials.html)、 联 系 我 们 页 面 (contact.html)、 关 于 我 们 页 面 (about.html)、 
购物 车 页 面 (carthtml) 和 显示 书 详细 内 容 的 更 多 细节 页 面 (details.html)， 这 些 页 面 可 以 
通过 首页 导航 菜单 的 链接 去 访问 。 
启动 WebStorm， 打 开 叮 叮 书 店 项 目 首页 index.html (在 第 3 章 的 3.5 节 建 立 )， 进 入 代 
码 编辑 区 ， 添 加 导航 菜单 和 相关 项 的 链接 ， 操 作 步 骤 如 下 : 

(1) 将 <div id="logo"> 里 的 标题 1 项 改 为 : 


<a href="index.html"><h1> 叮 叮 书店 </h1></a> 


(2) 将 <nav class="container"> 里 的 无 序列 表 项 改 为 : 


<1i><a href="index.html"> 首 页 </a></1i> 
<1li><a href="category .html"> 书 籍 分 类 </a></1i> 
<1i><a href="specials.html"> 特 刊 降 价 </a></1i> 
<1i><a href="contact .html"> 联 系 我 们 </a></1i> 
<li><a href="about .html"> 关 于 我 们 </a></1i> 


(3) 将 光标 定位 到 <div id="cart"> 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<a href="cart .html"> 购 物 车 </a> 


(4) 将 所 有 <div class="cart-more"> 加 入 购物 车 详细 内 容 </div> 里 的 “加 入 购物 车 详细 
内 容 ” 改 为 : 


<a class="cart" href="cart.html"> 加 入 购物 车 </a><a class="more" href= 
"details.html"> 详 细 内 容 </a> 


(5) 将 <section id="best-selling"> 下 面 <l 谊 里 的 “深度 学 习 [deep learning]” 改 为 : 

<a class="selling" href="#"> 深 度 学 习 [deep learning]</a> 

(6) 将 <div class="p-name"> 里 的 “深度 学 习 [deep learning]” 改 为 : 

<a title=" 深 度 学 习 [deep learning]" href="#"> 深 度 学 习 [deep learning]</a> 

提示 : <a hre 伍 "#"> 表 示 空 链接 ， 对 于 不 确定 的 链接 暂时 可 以 使 用 空 链接 替代 ， 等 以 后 
确定 后 再 修改 。<a href 仁 "#"> 表 示 链 接 到 页 面 开 始 位 置 ，<a hre 人 ="#"> 表 示 链 接 到 当前 位 置 。 

同样 ， 将 <section id="best-selling"> 下 面 <1i> 里 的 “Hadoop 权威 指南 : 大 数据 的 存储 与 


分 析 ( 第 4 版 )， 累 计 销量 超过 10 万 册 ”“ 和 秋 叶 一 起 学 PPT 第 3 版 ”“ 深 度 学 习 优 化 与 识 
别 ” 和 “区 块 链 原 理 、 设 计 与 应 用 ”参照 步骤 (5) 进行 修改 。 
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另外 将 <div class="p-name"> 里 的 “Hadoop 权威 指南 : 大 数据 的 存储 与 分 析 ( 第 4 版 )， 
累计 销量 超过 10 万 册 ”“ 和 秋 叶 一 起 学 PPT 第 3 版 ” 


原理 、 设 计 与 应 用 ”参照 步骤 (6) 进行 修改 。 


(7) 将 <section id="classify"> 里 <h2> 图 书 分 类 </h2> 下 面 的 图 书 分 类 列表 改 为 : 


<1i><a href="category .html"> 编 程 语 言 </a></1i> 
<1Li><a href="category.html"> 数 据 库 </a></1i> 

<1i><a href="category.html"> 图 形 图 像 </a></1i> 
<li><a href="category.html"> 网 页 制作 </a></1i> 
<1i><a href="category.html"> 考 试 认 证 </a></1i> 


(8) 将 <section id="partner"> 里 <h2> 合 作 伙 伴 </h2> 下 面 的 合作 伙伴 列表 改 为 : 


<1i><a href="#"> 中 国电 子 商 务 研究 中 心 </a></1i> 
<1i><a href="#"> 清 华 大 学 出 版 社 </a></1i> 
<1i><a href="#"> 中 国人 民 大 学 出 版 社 </a></1i> 
<1i><a href="#"> 中 国 社会 科学 出 版 社 </a></1i> 


(9) 将 <footer class="container"> 里 的 列表 项 标记 改 为 : 


<li><a href="index.html"> 首 页 </a></1i> 
<1i><a href="about .html"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 服 务 条 款 </a></1i> 

<1i><a href="#"> 隐 私 策略 </a></1i> 

<1i><a href="contact .html"> 联 系 我 们 </a></1i> 


(10) 将 <div id="copyright" class="container"> 下 面 <div> 里 的 “ 叮 叮 书店 ” 改 为 ; 
<a href="index.html"> 叮 叮 书店 </a> 


在 浏览 器 中 预览 ， 效 果 如 图 4.3 所 示 。 
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4.4 小 结 


本 章 主要 介绍 了 <a> 标 签 的 用 法 ,简单 介绍 了 HIMLS 字符 集 与 颜色 ,具体 介绍 了 叮 叮 
书店 首页 超 链接 的 添加 过 程 和 基本 操作 。 


4.5 “习题 


@ 选择 题 
(1) 已 知 services.html 和 texthtml 页 面 在 同一 个 服务 器 (站 点 ) 里 ， 但 不 在 同一 个 文 
件 夹 中 。 假 如 services.html 在 根 目 录 下 的 information 文件 夹 中 ， 现 要 求 在 text.html 中 编写 
-个 超 链接 ， 连 接 到 services.html 的 proposals 书签 ， 下 面 语句 正确 的 是 i 
A. <ahref="services.html#proposals">Link</a> 
B. <a href="/information/services.html#proposals">Link</a> 
C. <ahref="#proposals">Link</a> 
D. <a hre ending 


(2) 在 HTMLS5 文档 中 ， 超 链接 的 基本 形式 是 ): 

A. <alink="URL"></a> B. <a href="URL"></a> 

C. <a URL="URL"></a> D. <ahttp="URL"></a> 
(3) 在 HIMLS 文档 中 ,车 有 名 为 “end” 的 锚 点 ， 则 ( ) 是 建立 至 该 锚 点 的 链接 。 

A. <aname="end"> 页 尾 </a> B. <a href="end"> 页 尾 </a> 

C. <a hre 伍 "#end"> 页 尾 </a> D. <a hre 全 "selffend"> 页 尾 </a> 
(4) ( ) 是 空格 字符 实体 。 

A. &nbsp: B. &lt; C. 区 gt D. &copy; 
(5) 在 下 面 的 颜色 值 中 ，( ) 是 正确 的 颜色 值 。 

A. &FF0000 B. #EFHHOO C. 考 F00GG D. #EFBBO0O0 
@ 简 答 题 


(1) 超 链接 元 素 是 什么 ? 它 有 哪 两 种 主要 格式 ?功能 是 什么 

(2) 如 何 提 供 一 个 下 载 文件 的 链接 ? 

(3) 为 什么 在 网 页 中 需要 用 字符 实体 ? 字符 实体 有 哪 几 种 表示 方法 ? 常用 的 字符 实体 
有 哪 几 个 ? 

(4) HTML5 如 何 处 理 文档 中 连续 的 多 个 空白 符 ? 

(5) HIML5 如 何 表示 颜色 ? 
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多 媒体 是 我 们 可 以 看 到 和 听 到 的 一 切 ， 例 如 文本 、 图 片 、 音 乐 、 声 音 、 动 画 和 视频 等 。 
多 媒体 以 多 种 方式 存在 ， 大 多 数 多 媒体 被 存储 在 媒体 文件 中 ， 以 独立 的 文件 形式 存在 ， 一 
般 通 过 文件 的 扩展 名 来 区 分 不 同类 型 的 多 媒体 ，HTML5 可 以 通过 多 种 方式 使 用 多 媒体 。 
本 章 首先 重点 介绍 HTMLS5 图 像 元 素 ， 接 下 来 介绍 音频 /视频 文件 的 格式 及 如 何在 页 面 中 使 
用 ， 最 后 介绍 在 叮 叮 书店 首页 添加 多 媒体 元 素 的 操作 过 程 。 

本 章 要 点 : 

如 HTML5 图 像 。 

< 信 HTML5 音频 /视频 。 


5.1 HTML5 图 像 


可 以 在 HTML5 中 显示 图 像 的 标签 见 表 5.1。 


表 5.1 图 像 标签 
标 签 描述 
<img> 定义 图 像 
<map> 定义 带 有 可 单 击 区 域 的 图 像 映射 
<area> 定义 图 像 地 图 中 的 可 单 击 区 域 
<figure> 定义 媒介 内 容 的 分 组 以 及 它们 的 标题 
<figcaption> 定义 figure 元 素 的 标题 


5.1.1 <img> 标 签 


在 HTML5 中 图 像 由 <img> 标 签 定义 ，img 是 空 元 素 ， 表 5.2 列 出 了 img 元 素 的 常 
属性 。 
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表 5.2 img 元 素 的 常用 属性 

描述 

必需 ， 图 像 的 替换 文本 
需 ， 国 从 的 


可 选 ， 图 像 的 宽度 
将 图 像 定义 为 客户 端 图 像 映射 


width 


usemap 


@ src 居 性 
如 果 要 在 页 面 上 显示 图 像 ， 必 须 使 用 src 属性 声明 图 像 的 URL 地 址 。 其 格式 如 下 : 


<img src="url" /> 


url 指 图 像 文 件 的 位 置 。 浏 览 器 将 图 像 显示 在 文档 中 图 像 标签 出 现 的 地 方 。 

@ alt 属性 

当 浏 览 器 不 能 显示 图 像 时 《例如 无 法 载 入 图 像 或 浏览 器 禁止 图 像 显 示 )， 将 在 显示 图 
像 的 位 置 上 显示 alt 属性 定义 的 文本 。 为 页 面 上 的 每 一 个 图 像 加 上 替换 文本 属性 有 利于 更 
好 地 显示 信息 。 例 如 : 


<img src="boat.gif" alt=" 船 "> 


图 像 是 独立 于 文件 存在 的 ， 如 果 某 个 HTMLS5 文件 包含 10 个 图 像 ， 要 正确 地 显示 这 个 
页 面 ， 需 要 加 载 11 个 文件 ，HTTP 协议 需要 11 次 请 求 才能 完成 ， 而 加 载 图 片 是 需要 时 间 
的 ， 所 以 要 合理 地 在 文档 内 容 中 加 3 
入 图 像 ， 如 果 过 度 使 用 图 像 ， 用 户 
在 浏览 该 页 面 时 会 增加 很 多 不 必要 
的 等 待 时 间 。 

Web 使 用 的 主要 图 像 格式 有 
GIF、JPEG 和 PNG。 

圆 51 HTML5(img)html, 说 
明了 图 像 标签 的 用 法 ， 如 图 5.1 所 示 。 。。 图 5 HTML5SGms)html 示意 图 

源 代码 如 下 : 

<head> 

<title> 图 像 标签 </title> 

</head> 

<body> 

<img src="images/valid-xhtml10.png" alt=""> 

<p> 鼠 标 指针 指向 图 像 ,大 多 数 浏览 器 会 显示 title 属性 文本 .<img src="images/about .gif 

title=" 叮 叮 书店 "” alt=" 叮 叮 书店 "></p> 

<p> 如 果 无 法 显示 图 像 ， 将 显示 alt 属性 文本 : <img src="images/noabout .gif"” alt=" 叮 

叮 书店 "></p> 

</body> 


提示 : <img> 标 签 的 alt 属性 不 能 省 略 ， 否 则 在 “https://validatorw3.org/” 检 验 时 会 提 
示 错 误 。 


pixels 或 % 


url 
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5.1.2 <map> 标 签 和 <area> 标 签 


<map> 标 签 和 <area> 标 签 用 于 创建 图 像 地 图 ， 图 像 地 图 是 指 已 被 分 为 多 个 区 域 〈 图 像 


map 元 素 必 须 使 用 name 属性 定义 image-map 名 称 ，name 属性 与 img 元 素 的 usemap 
属性 相关 联 ， 创 建 图 像 与 映射 之 间 的 关系 。 
map 元 素 包含 area 元 素 ， 定 义 图 像 映射 中 的 可 单 击 区 域 。 表 5.3 列 出 了 area 元 素 的 常 


用 属性 。 
表 5.3 area 元 素 的 常用 属性 
属 性 值 描 述 
定义 可 单 击 区 域 坐标 。coords 属性 通常 与 shape 属性 配合 使 用 
来 规定 区 域 的 尺寸 、 形 状 和 位 置 。 图 像 左 上 角 的 坐标 是 "0,0"。 
i Xly1x2,y2: 如 果 shape 属性 为 "rect"， 该 值 规定 矩形 左 上 角 和 
人 本 右 下 角 的 坐标 ; yyradins: 如 果 shape 属性 为 "ie" 该 值 规定 
ee 圆心 的 坐标 和 径 ; Xl,y1,x2,y2," Xn yn: 如 果 shape 属性 为 
"poly", 该 值 规定 多 边 形 各 边 的 坐标 。 如 果 第 一 个 坐标 和 最 后 一 
个 坐标 不 一 致 ， 那 么 为 了 关闭 多 边 形 ， 浏 览 器 必须 添加 最 后 一 
对 坐标 
href url 定义 此 区 域 的 目标 URL 
nohref nohref 规定 该 区 域 没 有 相关 的 链接 
default 
rect 定义 区 域 的 形状 。 其 中 ，default 规定 全 部 区 域 ，rect 定义 矩形 
SP | cire 区 域 ，cire 定义 圆 形 ，poly 定义 多 边 形 区 域 
poly 
本 _blank 规定 在 何 处 打 开 链 接 文档 。 其 中 ， _blank 在 新 窗 [ 1] 中 打 开 被 链 
_self 接 文 档 ; _self 为 默认 ， 表 示 在 相同 的 窗口 中 打开 被 链接 文档 


贺 2 HTML5(map).html， 说 明了 <map> 标 签 和 <area> 标 签 的 用 法 ， 如 图 5.2 所 示 。 
源 代码 如 下 : 人 
<head> 

<title>map 和 area 标签 </title> 
</head> a 
<body> 视频 讲解 
<img src="images/prodl.jpg” alt=" 封 面 " usemap= 


"#mapimg"> 
<map name="mapimg" id="mapimg"> 


<area shape="rect" href="#" coords="100,175, 
L719 L190 aBt=""> 

<area shape="circle" href="#" coords="50, 50, 图 52 HIML5(map) html 示意 图 
50" alt=""> 


/Docwnents and Settings/**/HINLS (nap). htnl 


</map> 
</body> 
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当 鼠 标 指针 指向 图 像 中 的 “权威 指南 ”4 个 字 和 能 的 头 部 时 ， 鼠 标 指针 变 成 手 状 ， 并 
且 在 浏览 器 窗口 的 状态 栏 中 显示 链接 的 地 址 。 


5.1.3 ”<figure> 标 签 和 <figcaption> 标 签 


<figure> 标 签 规定 独立 的 内 容 ， 例 如 图 像 、 图 表 和 照片 等 ， 应 该 与 主要 内 容 相关 。 
<figcaption> 标 签 定义 figure 元 素 的 标题 。 

贺 53 HTML5(figure) html， 说 明了 <figure> 标 签 的 
用 法 ， 如 图 5.3 所 示 。 

源 代码 如 下 : 


<head> 
<title>figure 标签 </title> 
</head> 
<body> 
<figure> 
<figcaption> 图 书 封面 </figcaption> 
<img src="images/prodl.jpg" alt=" 封 面 "> 


图 书 封 


</figure> 
</body> 图 5.3 HTML5(figure).html 示意 图 


5.2 ” HTML5 音频 /视频 


HIMLS 音频 /视频 标签 见 表 5.4。 
表 5.4 HTML5 音频 /视频 标签 


<audio> 定义 音频 
<source> | 定义 媒介 源 
<track> | 定义 用 在 媒体 播放 器 中 的 文本 轨道 


<video> 定义 视频 
5.2.1 HTML5 视频 


<video> 标 签 定义 视频 ， 比 如 电影 片段 或 其 他 视频 流 。 在 使 用 <video> 播 放 视频 时 不 需 
要 任何 插件 ， 只 要 浏览 器 支持 HIMLS 就 可 以 。 表 5.5 列 出 了 video 元 素 的 常用 属性 。 
表 5.5 video 元 素 的 常用 属性 


视频 就 绪 后 自动 播放 
显示 视频 播放 器 控件 ， 例 如 播放 按钮 


autoplay autoplay 


controls controls 


zt 
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续 表 
属 描述 
height pixels 视频 播放 器 的 高 度 
loop loop 循环 播放 
width pixels 视频 播放 器 的 宽度 
poster url 定义 视频 下 载 时 显示 的 图 像 ， 或 用 户 单 击 播放 按钮 前 显示 的 图 像 
定义 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 "autoplay"， 
auto 则 忽略 该 属性 
preload metadata auto: 默认 值 ， 表 示 预 加 载 全 部 的 音频 /视频 
none metadata: 仅 加 载 音 频 /视频 的 元 数据 
none: 不 加 载 音频 /视频 
SIC url 播放 视频 的 URL 
muted muted 静音 


Video 元 素 只 要 有 src 属性 就 可 以 使 用 。 例 如 : 

<video src="multimedia/Wildlife.mp4"></video> 

对 于 不 支持 video 元 素 的 浏览 器 ， 可 以 在 元 素 内 容 中 添加 替换 文字 。 例 如 : 

<video src="multimedia/Wildlife.webm" controls="controls" autoplay= 

"autoplay"> 您 的 浏览 器 不 支持 video 元 素 </video> 

@ 视频 格式 

由 于 版 权 的 原因 ， 目 前 video 元 素 仅 支持 3 种 视频 编码 。 

。 0GG: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 OGG (.ogv) 文件 。 

。 MPEG4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG4 (.m4v、.mp4) 文件 。 

。 WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM (.webmy) 文件 。 

不 同 浏览 器 和 移动 设备 系统 对 视频 编码 格式 的 支持 情况 也 不 一 样 ， 表 5.6 列 出 了 当前 
浏览 器 和 移动 设备 系统 对 视频 编码 格式 的 支持 情况 。 

表 5.6 浏览 器 和 移动 设备 系统 对 视频 编码 格式 的 支持 情况 


格 式 浏览 器 和 系统 


WebM (.webm) | 火狐 4.0+、Chrome 6.0+、Opera 10.6+ 
OGG (.ogv) | 火狐 3.5+、Chrome 3.0+、Opera 10.5+ 
MPEG4 (md4v) IE 9.0+、Safari 3.1+、 ISO 5.0、Android 4.0+ 
MPEG4 (mp4) IE 9.0+、Safari 3.1+、ISO 3.0、Android 2.3+ 


加 <source> 标 签 

为 了 解决 浏览 器 对 视频 格式 的 兼容 问题 ， 可 以 使 用 <source> 标 签 为 同一 个 媒体 数据 指 
定 多 个 播放 格式 与 编码 方式 ,确保 浏览 器 可 以 从 中 选择 一 种 自己 支持 的 视频 格式 进行 播放 。 
例如 : 


<video controls="controls" autoplay="autoplay"> 


<source src="multimedia/Wildlife.ogv" type="video/o0gg"> 
<source src="multimedia/Wildlife.webm" type="video/webm"> 


<source src="multimedia/Wildlife.mp4" type="video/mp4"> 


pe 
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<p> 您 的 浏览 器 不 支持 video 元 素 。</p> 

</video> 

浏览 器 在 选择 时 自 上 而 下 ， 直 到 选择 到 所 支持 的 格式 为 止 。 

不 同 格式 视频 文件 的 转换 可 以 在 Intemet 上 搜索 一 些 免费 的 工具 软件 来 进行 ,例如 Free 
Video Converter， 可 以 从 “http://www.freemake.com/free_video_converter/” 下 载 ， 该 软件 支 
持 AVI、MP4、WMV、MKV、MPEG、3GP、DVD、MP3、iPod、iPhone、PSP、Android 
等 格式 。 


@ <track> 标 签 
<track> 标 签 为 video 元 素 之 类 的 媒介 规定 外 部 文本 轨道 ， 例 如 用 于 规定 字幕 文件 或 其 
他 包含 文本 的 文件 , 当 媒 介 播 放 时 这 些 文件 是 可 见 的 。 表 5.7 列 出 了 track 元 素 的 常用 属性 。 
表 5.7 track 元 素 的 常用 属性 
属 性 值 描 述 
default default 规定 该 轨道 是 默认 的 
表示 轨道 属于 什么 文本 类 型 
captions captions: 在 播放 器 中 显示 的 简短 说 明 
chapters chapters: 定义 章节 ， 用 于 导航 媒介 资源 
kind descriptions descriptions: 定义 描述 ， 用 于 通过 音频 描述 媒介 的 内 容 ， 假 如 内 容 
metadata 不 可 播放 或 不 可 见 
subtitles metadata: 定义 脚本 使 用 的 内 容 
subtitles: 才 ， 用 于 在 视频 中 显示 字幕 
label label 轨道 的 标签 或 标题 
SIC url 轨道 的 URL 
srclang language code 轨道 的 语言 ， 若 kind 属性 的 值 是 "subtitles"， 则 该 属性 必需 


HTML5 Video 外 挂 字幕 的 英文 简称 为 WebVTT (Web video text track)， 它 是 以 .vtt 为 
扩展 名 的 纯 文本 文件 。WebVTT 是 UTF-8 编码 格式 的 文本 文件 ， 内 容 示 例如 下 : 


WebVTT 


00:00:01.000 --> 00:00:04.000 
在 海边 ， 奔 腾 着 一 群 骏马 


00:00:05.000 --> 00:00:07.000 

惊 散 了 鸟 儿 

WebVTT 文件 中 的 每 一 项 为 一 个 cue， 以 箭头 分 隔 开始 时 间 和 结束 时 间 ， 时 间 格 式 为 
hours:minutes:seconds:milliseconds， 用 户 必须 严格 遵守 ， 时 、 分 、 秒 必须 为 两 位 数字 ， 不 足 
的 以 0 填补， 毫秒 必须 是 3 位 数字 。 对 应 的 文本 在 下 一 行 ， 文 本 可 以 是 一 
行 或 多 行 ， 在 文本 中 不 能 有 空 行 。 

贺 5.4 HTML5(video).html， 播 放 带 有 字幕 的 视频 ， 其 中 的 两 个 字幕 
之 一 是 默认 的 ， 如 图 5.4 所 示 。 

源 代码 如 下 : 


<head> 
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<title>HTML5 视频 </title> 
</head> 
<body> 
<video controls="controls" autoplay="autoplay"> 
<source src="multimedia/Wildlife.mp4" type="video/mp4"> 
<source src="multimedia/Wildlife.webm" type="video/webm"> 
<source src="multimedia/Wildlife.ogv" type="video/ogg"> 
<track kind="subtitles" src="multimedia/Wildlife-zh.vtt" srclang="zh" 
label=" 中 文 " default="default"> 
<track kind="subtitles" src="multimedia/Wildlife-en.vtt" srclang="en" 
label="English"> 
<p> 您 的 浏览 器 不 支持 video 元 素 。</p> 
</video> 
</body> 


图 5.4 HTML5(video).html 示意 图 


在 视频 加 载 后 ， 可 能 需要 单 击 视频 播放 器 按钮 才能 显示 字幕 。 
提示 : 必须 发 布 到 Web 服务 器 上 进行 浏览 才能 显示 字幕 。 


5.2.2 HTML5 音频 


HTML5 使 用 audio 元 素来 播放 音频 ， 其 常用 属性 和 video 元 素 一 样 。 
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@ 音频 格式 

目前 ，audio 元 素 支 持 以 下 3 种 音频 编码 。 

(1) 0GG: 全 称 应 该 是 OGG Vorbis (ogg Vorbis)， 它 是 一 种 新 的 音频 压缩 格式 。OGG 
是 完全 免费 、 开 放 和 没有 专利 限制 的 ， 文 件 扩展 名 是 .ogg。OGG 文件 格式 可 以 不 断 地 进行 
大 小 和 音质 的 改良 ， 且 不 影响 旧 的 编码 器 或 播放 器 。 

(2) MP3: 一 种 音频 压缩 技术 ， 其 全 称 是 动态 影像 专家 压缩 标准 音频 层面 3 (Moving 
Picture Experts Group Audio Layer II)， 简 称 为 MP3， 用 来 大 幅度 地 降低 音频 数据 量 。 它 将 
音乐 以 1:10 甚至 1:12 的 压缩 率 压缩 成 容量 较 小 的 文件 ， 对 于 大 多 数 用 户 来 说 重 放 的 音质 
与 最 初 的 不 压缩 音频 相 比 没有 明显 的 下 降 。 

(3) WAV: 微软 公司 (Microsoft) 开发 的 一 种 声音 文件 格式 ， 它 符合 RIFF (Resource 
Interchange File Format) 文件 规范 ， 被 Windows 平台 及 其 应 用 程序 广泛 支持 ， 标 准 格式 的 
WAV 文件 和 CD 格式 一 样 ， 采 用 44.1K 的 取样 频率 ，16 位 量化 数字 ， 声 音 文件 的 质量 和 
CD 相差 无 几 。 

在 3 种 格式 中 ，WAV 格式 音质 最 好 ， 但 是 文件 较 大 ; MP3 压缩 率 较 高 ， 音 质 比 WAV 
要 差 ，O0GG 与 MP3 在 相同 位 速率 (Bit Rate) 编码 情况 下 ，OGG 体积 更 小 ， 并 且 OGG 是 
免费 的 。 

@ 浏览 器 支持 情况 

不 同 浏览 器 对 于 audio 元 素 的 音频 格式 支持 情况 见 表 5.8。 

表 5.8 浏览 器 对 audio 元 素 的 音频 格式 支持 情况 
音频 格式 | Chrome | Fiefox | IE9 | opera | Safari 

OGG 不 支持 

MP3 支持 

WAV 不 支持 

- 般 提供 OGG 和 MP3 格式 就 可 以 支持 所 有 主流 浏览 器 了 。 

不 同 格式 音频 文件 的 转换 可 以 在 Intermnet 上 搜索 一 些 免费 工具 软件 来 进行 ， 例 如 Free 
Audio Converter， 可 以 从 “http://www.freemake.com/free_audio_converter/” 下 载 ， 该 软件 支 
持 MP3、WMA、WAV、FLAC、AAC、M4A、0GG 等 30 一 
多 种 音频 格式 。 人 

加 .5 HTML5(audio).html, 说 明了 <audio> 标 签 的 用 
法 ， 如 图 5.5 所 示 。 

源 代码 如 下 : 

<head> 

<title>HTML5 音频 </title> 
</head> 

<body> 


<h2> 许 冕 : 旅行 </h2> 
<audio controls="controls"> 


图 5.5 HTML5(audio).html 示意 图 


<source src="multimedia/Travel.mp3" type="audio/mpeg"> 


<source src="multimedia/Travel.ogg" type="audio/o0gg"> 
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<p> 您 的 浏览 器 不 支持 audio 元 素 。</p> 
</audio> 
</body> 


5.3 ”<embed> 标签 


<embed> 标 签 定义 嵌入 的 内 容 ， 比 如 插件 ， 这 是 一 个 空 标签 。 一 旦 对 象 嵌 入 到 页 面 中 ， 
对 象 将 成 为 页 面 的 一 部 分 。 该 元 素 主要 用 来 嵌入 视频 和 Flash。 表 5.9 列 出 了 embed 元 素 的 
常用 属性 。 


表 5.9 embed 元 素 的 常用 属性 


属 性 值 描 述 
SIC | url | 嵌入 内 容 的 URL 
height pixels 对 象 的 高 度 


定义 嵌入 内 容 的 类 型 ， 可 参阅 IANA MIME 类 型 列表 
http://www.iana.org/assignments/media-types/media-types.xhtml 
width pixels 对 象 的 宽度 
贺 5.6 HTML5(embed).html， 在 页 面 中 插入 了 一 个 
Flash， 如 图 5.6 所 示 。 
源 代码 如 下 : 
<head> 
<title>embed 标签 </title> 


</head> 


<body> 
<h2>Flash 广告 </h2> 图 5.6 HTML5(embed).html 示意 图 


type MIME type 


<embed src="multimedia/buick.swf" type="application/x-shockwave-flash" 
width="480" height="360"> 
</body> 


5.4 叮 叮 书店 首页 图 像 的 使 用 


叮 叮 书店 首页 内 容 除了 文本 和 超 链接 外 ， 还 需要 使 用 图 像 ， 例 如 书 的 视频 讲解 
封面 、 广 告 和 修饰 等 。 

启动 WebStormm， 打 开 叮 叮 书店 项 目 首页 index.html (在 第 4 章 的 4.3 节 建 立 )， 进 入 代 
码 编辑 区 ， 添 加 相关 图 像 ， 操 作 步 骤 如 下 : 

@ 本 周 推荐 、 最 近 新 书 、 最 近 促销 和 畅销 图 书 封面 图 像 

(1) 将 光标 定位 到 <section id="recommend"> 里 第 1 个 <div class="cover"> 的 后 面 ， 按 回 
车 键 ， 输 入 下 面 的 代码 : 


<a href="#"><img src="images/prod2.jpg"” alt="HTML5 权威 指南 "></a> 
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(2) 将 光标 定位 到 <section id="recommend"> 里 第 2 个 <div class="cover"> 的 后 面 ， 按 回 
车 键 ， 输 入 下 面 的 代码 : 

<a href="#"><img src="images/prod3.jpg"” alt="JavaScript 权威 指南 "></a> 

(3) 将 光标 定位 到 <section id="new"> 里 第 1 个 <div class="image-box"> 的 后 面 ， 按 回 车 
键 ， 输 入 下 面 的 代码 : 

<img src="images/prod4.jpg" alt="HTML5+CSS3 从 入 门 到 精通 "> 

(4) 将 光标 定位 到 <section id="new"> 里 第 2 个 <div class="image-box"> 的 后 面 ， 按 回 车 
键 ， 输 入 下 面 的 代码 : 

<img src="images/prod5.jpg”alt=" 响 应 式 Web 设计 "> 

提示 : 将 图 像 误 入 到 <div> 中 是 为 页 面 布 局 准备 的 ， 类 名 class="image-box" 为 以 后 自 定 
义 样 式 使 用 ， 最 近 新 书 的 两 本 书 样式 是 一 样 的 。 

(5) 将 光标 定位 到 <section id="sales"> 里 第 1 个 <div class="image-box"> 的 后 面 ， 按 回 
车 键 ， 输 入 下 面 的 代码 : 


<a href="#"><img class="promotion" src="images/prodl.jpg" alt="HTML5 和 CSS3 
实例 教程 "></a> 


(6) 将 光标 定位 到 <section id="sales"> 里 第 2 个 <div class="image-box"> 的 后 面 ， 按 回 
车 键 ， 输 入 下 面 的 代码 : 


<a href="#"><img class="promotion" src="images/prod3.jpg" alt="JavaSscript 


权威 指南 "></a> 
(7) 将 光标 分 别 定位 到 <section id="sales"> 里 第 1 个 和 第 2 个 <div class="text-desc"> 的 
后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<img src="images/sale.jpg" alt=""> 


(8) 将 光标 定位 到 “<a class="selling”hre 伍 "#"> 深 度 学 习 [deep learning]</a><div 
class="curr"><div class="p-img">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 ; 


<a title=" 深 度 学 习 [deep learning]" href="#"><img src="images/sellingl.jpg" 
alt=" 封 面 "></a> 


(9) 将 光标 定位 到 “<a class="selling" hre 伍 "#">Hadoop 权威 指南 : 大 数据 的 存储 与 分 
析 ( 第 4 版 )， 累 计 销 量 超过 10 万 册 </a><div class="curr"><div class="p-img">” 的 后 面 ， 按 
回 车 键 ， 输 入 下 面 的 代码 : 


<atitle="Hadoop 权威 指南 :大 数据 的 存储 与 分 析 (第 4 版 ) ”href="#"><img src="images/ 
selling2.jpg"” alt=" 封 面 "></a> 


(10) 将 光标 定位 到 “<a class="selling”hre 伍 "#"> 和 秋 叶 一 起 学 PPT 第 3 版 </a><div 
class="curr"><div class="p-img">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<a title=" 和 秋 叶 一 起 学 PPT 第 3 版 " href="#"><img src="images/selling3.jpg" 


77 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


alt=" 封 面 "></a> 


(11) 将 光标 定位 到 “<a class="selling" hre 伍 "#"> 深 度 学 习 优 化 与 识别 </a><div class= 


"curr"><div class="p-img">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<a title=" 深 度 学 习 优 化 与 识别 " href="#"><img src="images/selling4.jpg" alt= 


"封面 "></a> 


(12) 将 光标 定位 到 “<a class="selling”hre 伍 "#"> 区 块 链 原理 、 设 计 与 应 
class="curr"><div class="p-img">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


</a><div 


<a title=" 区 块 链 原理 、 设 计 与 应 用 " href="#"><img src="images/selling5.jpg" 


alt=" 封 面 "></a> 

@ 广告 区 图 像 

将 光标 定位 到 “<div id="advert">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 
<a href="#"><img src="images/adl.jpg”alt=" 广 告 "></a> 


<a href="#"><img src="images/ad2.jpg" alt=" 广 告 ">></a> 
<a href="#"><img src="images/ad3.jpg"” alt=" 广 告 "></a> 


@ 关于 书店 图 像 


将 光标 定位 到 “<h2> 关 于 书店 </h2><div class="content"> ”的 后 面 ， 按 回 车 键 ， 输 入 下 


面 的 代码 : 
<img src="images/about .gif" alt=" 叮 叮 书店 "> 
在 浏览 器 中 预览 ， 效 果 如 图 5.7 所 示 。 


本 周 推 荐 
《HTML5 权 威 指南 》 


成 就 开发 高 手 


HTMIL5 


”权威 指南 


和 车 详 组 内 容 


; .50 sa 
1 的 在 健 与 站 折 /于 4)， 时 计 销 号 起 计 10 胡 
《JavaScript 权 威 指南 》 


L107 ¥ 43.50 ¥52-89 


图 5.7 叮 叮 书店 首页 图 像 预 览 示意 图 
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5.5 小结 


本 章 重 点 介绍 了 HTMLS5 图 像 元 素 ， 简 单 介绍 了 HIMLS 如 何 使 用 音频 和 视频 ， 具 体 
介绍 了 叮 叮 书店 首页 图 像 的 添加 过 程 和 基本 操作 。 


5.6 习题 


@ 选择 题 
(1) 关于 下 列 两 行 HTMLS 代码 ， 描 述 正确 的 是 ( 。 )。 


<img src="image.gif" alt="picture"> 


<a href="image.gif">picture</a> 


A. 两 者 都 是 将 图 像 链 接 到 网 页 
B. 前 者 是 链接 后 在 网 页 中 显示 图 像 ， 后 者 是 在 网 页 中 直接 显示 图 像 
C. 两 者 都 是 在 网 页 中 直接 显示 网 像 
D. 前 者 是 在 网 页 中 直接 显示 图 像 ， 后 者 是 链接 后 在 网 页 中 显示 图 像 
(2) 下 列 有 关 网 页 中 图 像 的 说 法 不 正确 的 是 )。 
A. 网 页 中 的 图 像 并 不 与 网 页 保存 在 同一 个 文件 中 ， 每 个 图 像 单 独 保存 
TMLS 图 像 标签 可 以 描述 图 像 的 位 置 、 大 小 等 属性 
TMLS5 图 像 标签 可 以 直接 描述 图 像 上 的 像素 
D. 图 像 可 以 作为 超 链 接 的 起 始 对 象 
(3) 若 要 在 页 面 中 创建 一 个 图 像 超 链接 ， 要 显示 的 图 像 为 logo.gif， 链 接地 址 “http:// 
www.sohu.com/”， 以 下 用 法 中 正确 的 是 )。 
A. <ahref="http://www.sohu.com/">logo.gif</a> 
B. <a href="http://www.sohu.com/"><img src="logo.gif"'></a> 
C. <img src="logo.gif'><a href="http://www.sohu.com/"></a> 
D. <a href="http://www.sohu.com/"><img src="logo.gif'"> 
(4) 在 以 下 标签 中 ， 主 要 用 来 创建 视频 和 Flash 的 是 汽 
A. <object> B. <embed> C. <form> D. <marquee> 
(5) 为 了 解决 浏览 器 对 视频 格式 的 兼容 情况 ， 可 以 使 用 ( ) 标签 为 同一 个 媒体 数 
据 指 定 多 个 播放 格式 与 编码 方式 。 
A. <source> B. <audio> C. <video> D. <track> 
@ 简 答题 
(1) 嵌入 图 像 的 元 素 是 什么 ? 它 有 哪些 必需 和 常用 属性 ? 
(2) 目前 video 元 素 支 持 哪些 视频 编码 ? 
(3) 如 何 解 决 不 同 浏览 器 对 视频 格式 的 兼容 情况 ? 
(4) <map> 和 <area> 标 签 的 作用 是 什么 ? 
(5) 为 什么 要 合理 地 在 页 面 中 使 用 图 像 ? 


BH 
CcC.H 
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表格 是 组 织 数据 的 一 种 有 效 方法 ， 表 格 不 仅仅 用 在 文字 处 理 上 ， 在 网 页 中 的 作用 也 非 
常 重要 ， 特 别 是 在 表现 列表 数据 方面 。 本 章 首先 介绍 HTML5 表格 的 组 成 结构 ， 接 下 来 介 
绍 HIMLS 表格 的 标签 ， 然 后 重点 介绍 <table>、<tr> 和 <td>， 最 后 通过 叮 叮 书店 “购物 车 ” 


页 面 介绍 表格 的 应 用 。 
本 章 要 点 : 
如 HTML5 表格 的 组 成 。 
妇 常用 的 表格 标签 <table>、<tr> 和 <td>。 


6.1 表格 结构 和 表格 标签 
6.1.1 表格 结构 


表格 是 由 行 和 列 组 成 的 二 维 表 ， 每 个 表格 均 有 若干 行 ， 每 行 有 若干 列 ， 行 和 列 围 成 的 
区 域 是 单元 格 。 单 元 格 的 内 容 是 数据 ， 故 也 称 数据 单元 格 ， 数 据 单元 格 可 以 包含 文本 、 图 
片 、 列 表 、 段 落 、 表 单 、 水 平 线 或 表格 等 元 素 。 

一 个 典型 的 HIMLS 表格 包括 一 个 标题 、 头 部 、 主 体 和 脚 部 。 


6.1.2 表格 标签 


HTML5 表格 标签 见 表 6.1。 表格 由 <table> 标 签 定义 , 行 由 <tr> 标 签 定 义 , 单元 格 由 <td> 
标签 定义 ， 这 3 个 标签 是 常用 的 表格 标签 。 
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表 6.1 表格 标签 
表 格 描 述 
<table> 定义 表格 
<caption> 表格 标题 
<th> 表格 的 头 部 行 〈 标 题 行 ) 
<tr> 表格 的 行 
<td> 表格 单元 格 
<thead> 表格 的 头 部 
<tbody> 表格 的 主体 
<tfoot> 表格 的 脚 部 
<col> 用 于 表格 列 的 属性 
<colgroup> 表格 列 的 组 合 
贺 51 HTML5(table).html， 使 用 表格 标签 实现 了 一 个 典型 的 表格 ， 如 图 6.1 所 示 。 


源 代码 如 下 : 


<head> 表格 头 部 
表格 体 


<title> 表 格 </title> [表格 体 


<style> 表格 脚 部 
table, td, th { border: lpx solid gray; } 


A 图 6.1 HTML5(table).html 示意 图 
</head> 
<body> 
<table> 
<caption> 表 格 标题 </caption> 
<thead> 
<tr> 
<th> 表 格 头 部 </th> 视频 讲解 
<th> 表 格 头 部 </th> 
<th> 表 格 头 部 </th> 
</Er> 
</thead> 
<tbody> 
Er 
<td> 表 格 主体 </td> 
<td> 表 格 主体 </td> 
<td> 表 格 主体 </td> 
</tr> 
<EP 
<td> 表 格 主体 </td> 
<td> 表 格 主体 </td> 
<td> 表 格 主体 </td> 
</Er> 
</tbody> 
<tfoot> 


<tr> 
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<td> 表 格 脚 部 </td> 
<td> 表 格 脚 部 </td> 
<td> 表 格 脚 部 </td> 
/EES 
</tfoot> 
</table> 
</body> 


6.2 ”常用 表格 标签 


6.2.1 ” <table> 标签 
<table> 标 签 定义 表格 ， 简 单 的 HTMLS5 表格 由 <table> 以 及 一 个 或 者 多 个 <t>、<th> 或 


<td> 组 成 ，<tr> 定 义 表 格 行 ，<th> 定 义 表 头 行 ，<td> 定 义 表格 单元 ， 更 复杂 的 HTML5 表格 
也 可 能 包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以 及 <tbody>。<table> 标 签 的 


表 6.2 ”<table> 标 签 的 常用 属性 


属 性 什 描述 
border pixels 规定 表格 边框 的 宽度 ， 单 位 是 像素 。 不 赞成 使 用 ， 建 议 使 用 样式 取代 它 
cellpadding De 规定 单元 格 边 框 与 内 容 之 间 的 空白 。 不 赞成 使 用 ,建议 使 用 样式 取代 它 

0 
i De 规定 单元 格 之 间 的 空白 。 不 赞成 使 用 ， 建 议 使 用 样式 取代 它 
0 
width 规定 表格 的 宽度 。 不 赞成 使 用 ， 建 议 使 用 样式 取代 它 
border 属性 规定 围绕 表格 的 边框 宽度 。border 属性 会 为 每 个 单元 格 应 用 边框 ， 并 用 边 


框 围绕 表格 。 如 果 改 变 border 属性 值 ， 只 有 表格 周围 边框 的 尺寸 发 生变 化 ， 单 元 格 的 边框 
还 是 1 像素 宽 。 设 置 border="0"， 可 以 显示 没有 边框 
的 表格 。 
[ 融 6.2 HTML5(table_border) html, 把 表格 周围 
的 边框 设置 为 5 像素 宽 ， 如 图 6.2 所 示 。 
源 代码 如 下 : 
<head> 
<title> 表 格 边框 </title> 
<style> 
table{border: 5px solid gray;} 
</style> 
</head> 
<body> 


图 6.2 HTML5(table_border).html 示意 图 
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<table> 
<tr><th> 课 程 </th><th> 学 分 </th></tr><tr> 
<td> 《Web 技术 基础 》</tad> 
<td>3</td> 
</tr> 
</table> 
</body> 
提示 : 为 了 符合 Web 标准 ， 该 示例 中 并 没有 直接 使 用 <table> 标 签 的 属性 ， 而 是 使 用 了 
样式 代替 。 


6.2.2 ” <tr> 标签 
<tr> 定 义 HTML5 表格 中 的 行 ，<tr> 包 含 一 个 或 者 多 个 <th> 或 <td>。 
6.2.3 ”<td> 标 签 
<td> 定 义 HTML5 表格 中 的 标准 单元 格 。 HTML5 表格 有 两 类 单元 格 ， 其 中 表 头 单元 格 


(th) 包含 头 部 信息 ， 标 准 单元 格 (td) 包含 数据 。<td> 标 签 的 常用 属性 见 表 6.3。 
表 6.3 ”<td> 标 签 的 常用 属性 


属 性 描 述 
colspan 规定 单元 格 可 横 跨 的 列 数 
TOowWspan 规定 单元 格 可 横 跨 的 行 数 


colspan 和 rowspan 属性 用 于 建立 不 规范 表格 ,所 谓 不 规范 表格 是 单元 格 的 个 数 不 等 于 
行 乘 以 列 的 数值 。 例 如 3 行 3 列 的 表格 共有 9 个 单元 格 ， 图 6.3 所 示 为 一 个 规范 表格 ， 
图 6.4 所 示 为 一 个 不 规范 表格 ， 图 6.4 中 第 1 行 的 第 2、3 两 个 单元 格 合并 为 一 个 单元 格 ， 
即 第 1 行 的 第 2 个 单元 格 横 跨 两 列 ， 把 第 1 行 的 第 3 个 单元 格 位 置 占据 了 ; 第 2 行 的 第 3 
个 单元 格 和 第 3 行 的 第 3 个 单元 格 合并 为 一 个 单元 格 , 即 第 2 行 的 第 3 个 单元 格 横 跨 两 行 ， 
把 第 3 行 的 第 3 个 单元 格 位 置 占 据 了 。 


图 6.3 规范 表格 图 6.4 不 规范 表格 
圆 63 HTML5(table td)html， 实 现 了 图 6.4 所 示 的 不 规范 表格 。 
源 代码 如 下 : 


<head> 
<title>td 标签 属性 </title> 
<style> 视频 讲解 
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table, td{border: lpx solid gray;} 
</style> 
</head> 
<body> 
<table> 
<tr><td>gnbsp; </td><td colspan="2">gnbsp;</td></tr> 
<tr> 
<td>gnbsp; </td><td>gnbsp; </td><td rowspan="2">&nbsp;</td> 
</tr> 
<tr><td>gnbsp; </td><td>gnbsp; </td></tr> 
</table> 
</body> 


6.2.4 ”<col> 标 签 


<col> 标 签 为 表格 中 的 一 个 或 多 个 列 定义 属性 值 。 如 果 对 多 个 列 应 用 样式 ，<col> 标 签 
很 有 有 用。 注意 ， 只 能 在 <table> 或 <colgroup> 中 使 用 <col> 标 签 。<col> 标 签 的 常用 属性 见 
表 6.4。 


表 6.4 <col> 标 签 的 常用 属性 


属 性 描 述 
span 规定 col 元 素 应 该 横 跨 的 列 数 
width 规定 col 元 素 的 宽度 


span 属性 规定 col 元 素 应 该 横 跨 的 列 数 。 在 默认 情况 下 ， 它 只 能 影响 一 列 。 
col 元 素 是 空 元 素 , 必须 在 tr 元 素 内 部 规定 td 元 素 ， 

这 样 才能 使 用 col。 一 全 en 
[ 圆 64 HTIML5(table col) html， 使 用 <col> 标 签 为 

表格 中 的 4 个 列 规定 了 不 同 的 背景 色 ， 如 图 6.5 所 示 。 图 6.5 HTML5(table_col).html 示意 图 
源 代 码 如 下 : 


<head> 
<title>col 标签 </title> 
<style> 
table, td, th{border: lpx solid gray;} 
</style> 
</head> 
<body> 
<table> 
<col style="background-color:#939" /> 
<col span="2" style="background-color:#9C3" /> 
<col style="background-color:#F99" /> 
<tr> 
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<td> 单 元 格 </td><td> 单 元 格 </td><td> 单 元 格 </td><td> 单 元 格 </td> 
ER 
-Er 
<td> 单 元 格 </td><td> 单 元 格 </td> 
<td> 单 元 格 </td><td> 单 元 格 </td> 
</tr> 
</table> 
</body> 


提示 : “style="background-color:#939"” 中 的 style 属性 定义 单元 格 的 背景 色 。 
6.2.5 <thead>、<tbody> 和 <tfoot> 标 签 


<thead> 标 签 定 义 表格 的 头 部 ，<tbody> 标 签 定义 表格 的 主体 ，<tfoo 忆 标签 定义 表格 的 
脚 部 。<thead> 应 该 与 <tbody> 和 <tfoot> 结 合 起 来 使 用 。 
如 果 使 用 <thead>、<tbody> 以 及 <tfoot>， 就 必须 全 部 使 用 。 它 们 出 现 的 次 序 是 <thead> 一 
<tbody> 一 <tfoot>， 必 须 在 <table> 内 部 使 用 这 些 标签 ，<thead> 内 部 必须 拥有 <tr> 标 签 。 
回 称 吕 交 汪 国 


启动 WebStorm, 打开 叮 叮 书店 项 目 , 新 建文 件 cartl.html, 在 cartl.html 视频 讲解 
中 使 用 5 行 5 列 的 表格 显示 购物 车 的 内 容 ， 第 1 行 是 表格 的 标题 行 ， 最 后 一 行为 统计 行 。 
在 浏览 器 中 预览 ， 效 果 如 图 6.6 所 示 。 
购物 车 
名 称 单价 数量 合计 


《深度 学 习 》 100.001 100.00 


《深度 学 习 优 化 与 识别 》 100.001 lo0.00 


图 6.6 ”cartl.html 页 面 示意 图 


其 源 代码 如 下 : 


<head> 
<title> 购 物 车 </title> 
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</head> 
<body> 
<section class="cart-table"><span class="icon-cart"></span> 
<h2> 购 物 车 </h2> 
<table> 
<tr> 
<th colspan="2"> 名 称 </th> 
<th> 单 价 </th> 
<th> 数 量 </th> 
<th> 合 计 </th> 
</tr> 
<tr> 
<td><a href="details.html"><img src="images/sellingl 
"封面 "/></a></td> 
<td><h3>《 深 度 学 习 》</h3></td> 
<td>100.00</td> 
<td>1</td> 
<td>100.00</td> 
</tr> 
<tr> 
<td><a href="details.html"><img src="images/selling2 
"封面 "/></a></td> 
<td><h3>《Hadoop 权威 指南 : 大 数据 的 存储 与 分 析 》</h3></td> 
<td>100.00</td> 
<td>1</td> 
<td>100.00</td> 
</tr> 
0 六 
<td><a href="details.html"><img src="images/selling4 
"封面 "/></a></td> 
<td><h3>《 深 度 学 习 优 化 与 识别 》</h3></td> 
<td>100.00</td> 
<td>1</td> 
<td>100.00</td> 
</tr> 
<tr> 
<td colspan="5"> 
<div>3 件 商品 总 价 (不 含 运费 ): 竺 300. 00 <a href="#"> 去 结算 </a></div> 
</td> 
SEE> 
</table> 
</section> 
</body> 


6.4 ”小结 


本 章 介绍 了 HIMLS 表格 的 组 成 结构 ， 详 细 介 绍 了 HIMLS 常用 的 表格 标签 <table>、 
<tr>、<td> 和 <col>， 具 体 介绍 了 叮 叮 书店 “购物 车 ”页 面 的 建立 过 程 和 基本 操作 。 
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6.5 “习题 


@ 选择 题 
(1) 表格 的 主要 作用 是 〈 加 
A. 网 页 排版 布局 B. 显示 数据 C. 处 理 图 像 D. 优化 网 站 
(2) 如 果 表 格 的 边框 不 显示 ， 应 设置 border 的 值 为 〈 )。 
A. 1 B. 0 C2 D3 
(3) 定义 单元 格 的 是 (。”)。 
A. <td></td> 卫 ，<tr></tr> 
C. <table></table> D. <caption></caption> 
(4) 跨行 的 单元 格 是 ( 先 
A. <thcolspan="2"> B. <throwspan="2"> 
C. <td colspan="2"> D. <tdrowspan="2"> 
(5) 表格 的 脚 部 是 ( 号 
A. <tbody></tbody> B. <tfoot></tfoot> 
C. <thead></thead> D. <caption></caption> 
@ 简 答题 
(1) 用 于 表格 的 标签 有 哪些 ? 常见 结构 是 什么 样 的 ? 


(2) 如 何 设置 跨 多 行 /多 列 的 表格 单元 格 ? 
(3) 一 个 完整 表格 的 标签 顺序 是 什么 ? 
(4) <table> 的 边框 和 <td> 的 边框 是 一 个 吗 ? 
(5) 什么 时 候 使 用 <col> 标 签 ? 
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表单 是 允许 浏览 者 进行 输入 的 区 域 ， 可 以 使 用 表单 从 用 户 处 收集 信息 。 浏 览 者 在 表单 
中 输入 信息 , 然后 将 这 些 信息 提交 给 服务 器 , 服务 器 中 的 应 用 程序 会 对 这 些 信 息 进行 处 理 ， 
进行 响应 ， 这 样 就 完成 了 浏览 者 和 服务 器 之 间 的 交互 。 本 章 首先 介绍 表单 的 基本 概念 和 
HIMLS 表单 标签 ， 接 下 来 重点 介绍 常用 的 表单 域 标签 ， 最 后 详细 介绍 叮 叮 书店 “联系 我 
们 ”页 面 的 建立 过 程 。 

本 章 要 点 : 

< HTML5 表单 。 

如 HTML5 表单 域 。 


7.1 表单 的 基本 知识 
7.1.1 什么 是 表单 


表单 是 一 个 包含 表单 域 的 容器 , 表单 元 素 允 许 用 户 在 表单 中 使 用 表单 域 (例如 文本 域 、 
下 拉 列 表 、 单 选 按钮 和 复 选 框 等 ) 输入 信息 。 

一 个 表单 可 以 看 成 有 3 个 组 成 部 分 一 一 表单 标签 、 表 单 域 和 表单 按钮 。 表 单 标签 包含 
了 处 理 表单 数据 所 用 的 程序 和 数据 提交 到 服务 器 的 方法 ， 表 单 域 包含 了 文本 框 、 密 码 框 、 
多 行文 本 框 、 复 选 框 、 单 选 按钮 和 列表 框 等 输入 元 素 ;表单 按钮 主要 包括 提交 按钮 和 复位 
按钮 ， 用 于 将 数据 传送 到 服务 器 或 者 取消 输入 。 


7.1.2 ”<form> 标 签 


<form> 标 签 用 于 创建 HTML5 表单 ， 表 单 用 于 向 服务 器 传输 数据 。<fom> 标 签 的 常用 
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属性 见 表 7.1。 
表 7.1 <form> 标 签 的 常用 属性 


属 性 描述 
action 当 提交 表单 时 向 何 处 发 送 表单 数据 ， 不 能 为 空 
| Be 定义 如 何 发 送 表单 数据 

post 
autocomplete | 是 否 启用 表单 的 自动 完成 功能 


如 果 使 用 该 属性 ， 在 提交 表单 时 不 进行 验证 


novalidate novalidate 


@ action 居 性 

action 属性 定义 当 提 交 表单 时 向 何 处 发 送 表 单数 据 进行 处 理 , 也 就 是 将 表单 的 内 容 提交 到 
action 指定 的 服务 器 端 脚本 程序 进行 处 理 。 

@ method 居 性 

method 属性 规定 如 何 发 送 表单 数据 ， 表 单数 据 可 以 作为 URL 变量 (method="get") 或 
者 以 HITP POST (method="post") 方式 发 送 ， 即 POST 方法 和 GET 方法 。 

采用 POST 方法 是 在 HITP 请 求 中 嵌入 表单 数据 。 浏 览 器 首先 与 action 属性 中 指定 的 
服务 器 建立 连接 ， 建 立 连接 之 后 ， 浏 览 器 按 分 段 传输 的 方法 将 数据 发 送 给 服务 器 。 

当 采 用 GET 方法 时 ， 浏 览 器 会 与 服务 器 建立 连接 ， 然 后 将 表单 数据 直接 附 在 action 
值 之 后 ， 通 过 URL 在 一 个 传输 步骤 中 发 送 所 有 的 表单 数据 ，URL 和 表单 数据 之 间 用 问号 
进行 分 隔 。 

例如 在 百度 中 进行 搜索 ，URL 为 “http://www.baidu.com/”， 当 输入 关键 字 “HTML5” 
百度 一 下 时 ，URL 变 成 如 下 : 


http://www.baidu.com/s?wd=HTMLS5&rsv spt=1l&issp=1&rsV bp=0&ie=utf-8&tn= 


baiduhome pg&ginputT=3149 

关键 字 “HTML5” 作 为 表单 的 数据 是 通过 URL 传送 给 百度 服务 器 的 。 

注意 , 使 用 GET 方法 不 能 发 送 比 较 多 的 表单 数据 。 如 果 发 送 的 数据 量 太 大 ， 数 据 将 被 
截断 。 

如 果 要 收集 用 户 名 和 密码 、 信 用 卡号 或 其 他 保密 信息 ，POST 方法 会 相对 比 GET 方法 
安全 ， 但 POST 方法 发 送 的 信息 是 未 经 加 密 的 ， 容 易 被 黑客 获取 。 

那么 是 选用 POST 方法 还 是 选用 GET 方法 发 送 表单 数据 呢 ? 用 户 可 以 参考 下 面 的 
规律 : 

(1) 如 果 希 望 获得 最 佳 表单 传输 性 能 ， 可 以 采用 GET 方法 发 送 比较 少 的 数据 。 

(2) 对 于 有 许多 表单 域 ， 特 别 是 有 很 长 文本 域 的 表单 ， 应 该 采用 POST 方法 来 发 送 。 

(3) 如 果 考 虑 安全 性 ， 建 议 选用 POST 方法 。GET 方法 将 表单 数据 直接 放 在 URL 中 ， 
可 以 很 轻松 地 捕获 它们 ， 而 且 还 可 以 从 服务 器 的 日 志文 件 中 进行 摘录 。 

@ autocomplete 属性 

autocomplete 属性 确定 表单 是 否 启 用 自动 完成 功能 。 自 动 完 成 允许 浏览 器 侦 测 字段 输 
入 ， 当 用 户 开始 输入 时 , 浏览 器 会 基于 以 前 输入 过 的 值 自动 列表 显示 在 字段 中 填写 的 选项 。 


89 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


提示 : autocomplete 属性 适用 于 <form>, 以 及 text、 search、 url、 telephone、email、 password、 
datepickers、range 和 color 等 <input> 类 型 。 

圆 71 HTML5(form).html， 该 页 面 中 的 表单 拥有 3 个 输入 字段 以 及 
1 个 提交 按钮 ， 表 单 提交 时 不 进行 验证 ， 单 位 文本 框 输入 不 启用 自动 完成 
功能 ， 如 图 7.1 所 示 。 当 提交 表单 时 ， 表 单数 据 会 提交 到 HTML5(form_ 
action).html 页 面 ， 如 图 7.2 所 示 。 

源 代码 如 下 : 

<head> 

<title>form 标签 </title> 
</head> 


<body> 
<form action="html5 (form action).html" method="get" autocomplete="on" 


视频 讲解 


novalidate="novalidate"> 
<labe1> 姓 名 :</1label> 
<input type="text" name="name" id="name"><br> 
<label1>3 单 位 :</1label> 
<input type="text" name="unit" id="unit" autocomplete="off"><br> 
<label>Email:</label> 
<input type="email" name="email" id="email"><br> 
<input type="submit" value=" 提 交 " /> 


</form> 

</body> 
姓名 :| 
单位 : 
Email : 


| 提交 | 谢谢 你 提交 的 表单 信息 ! 


图 7.1 HTML5(form).html 示意 图 图 7.2 HTML5(form action).html 示意 图 


提示 : 表单 标签 本 身 在 页 面 上 并 不 可 见 。HTML5(form action).html 页 面 并 没有 接收 和 
处 理 表 单数 据 ， 本 例 只 是 演示 说 明 ， 接 收 和 处 理 表单 数据 需要 使 用 服务 器 端 技 术 。 


7.2 ”表单 域 


表单 中 常用 的 表单 域 标签 见 表 7.2。 


表 7.2 表单 域 标签 
<input> 输入 域 
<textarea> 多 行文 本 域 
<label> 标签 
<fieldset> 分 组 或 字段 域 
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续 表 
标 签 描 述 
<legend> 分 组 或 字段 域 的 标题 
<select> 列表 
<option> 列表 项 
<optgroup> 列表 选项 组 
<button> 按钮 
<datalist> 下 拉 列 表 
<output> 输出 


7.2.1 ” <input> 标 签 


<input> 标 签 用 于 输入 信息 ， 根 据 不 同 的 type 值 ，<input> 有 多 种 形式 ， 可 以 是 文本 框 、 
复 选 框 、 单 选 按钮 和 按钮 等 。<input> 是 空 标签 。 表 7.3 列 出 了 <inpu 亿 标签 的 常用 属性 。 
表 7.3 <input> 标 签 的 常用 属性 


属 性 值 描 述 
accept mime type 文件 上 传 提 交 的 文件 类 型 
alt text 图 像 的 替换 文本 
autocomplete 证 是 否 使 用 输入 字段 的 自动 完成 功能 
autofocus autofocus 字段 在 页 面 加 载 时 是 否 获得 焦点 。 其 不 适用 于 type="hidden" 
checked checked input 元 素 首 次 加 载 时 被 选中 
disabled disabled input 元 素 加 载 时 禁用 此 元 素 
form formname 规定 输入 字段 所 属 的 一 个 或 多 个 表单 
formaction url 覆盖 表单 的 action 属性 。 其 用 于 type="submit" 和 type="image" 
formmethod ee 覆盖 表单 的 method 属性 。 其 用 于 type="submit" 和 type="image" 
formnovalidate | formnovalidate “| 歼 盖 表 单 的 novalidate 属性 。 使 用 该 属性 ， 则 提交 表单 时 不 进行 验证 
formtarget 覆盖 表单 的 target 属性 。 其 用 于 type="submit" 和 type="image" 
height Bs 定义 input 字段 的 高 度 。 其 用 于 type="image" 
list datalist-id 引用 包含 输入 字段 的 预定 义 选 项 的 datalist 
max 规定 输入 字段 的 最 大 值 。 与 min 属性 配合 使 用 ， 创 建 合法 值 的 范围 

le 
maxlength number 输入 字符 的 最 大 长 度 
min 2 规定 输入 字段 的 最 小 值 。 与 max 属性 配合 使 用 ， 创 建 合法 值 的 范围 
le 

multiple multiple 如 果 使 用 该 属性 ， 则 允许 一 个 以 上 的 值 
name field name input 元 素 名 称 

规定 输入 字段 值 的 模式 或 格式 〈 正 则 表达 式 ) 。 例 如 pattem="[0-9]" 
Te PP em | 表示 输入 值 必 须 是 0~9 的 数字 
placeholder text 帮助 用 户 填写 输入 字段 的 提示 
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续 表 
属 性 值 描 述 
readonly readonly 输入 字段 为 只 读 
required required 输入 字段 值 是 必需 的 
Size number of char | 输入 字段 的 宽度 
SIC url 以 提交 按钮 形式 显示 的 图 像 URL 
step number 规定 输入 字段 的 合法 数字 间隔 
type 见 表 7.4 input 元 素 类 型 
value value input 元 素 的 值 
width 和 定义 input 字段 的 宽度 。 其 用 于 type="image" 
@ type 居 性 


type 属性 规定 input 元 素 的 输入 类 型 。 表 7.4 列 出 了 <input> 标 签 的 type 属性 值 。 
表 7.4 <input> 标 签 的 type 属性 值 


值 描 述 
button 按钮 
checkbox 复 选 框 
file 文件 域 ， 包 括 输入 字段 和 “浏览 ”按钮 ， 供 文件 上 传 
hidden 隐藏 域 
image 图 像 形式 的 安 钮 
password 密码 域 ， 字 符 被 掩 码 
radio 单 选 按钮 
reset i 性 按 钮 。 重 置 按钮 会 清除 表单 中 的 所 有 数据 


submit 到 服务 器 
text 了 。 其 默认 
email 规定 包含 e-mail 地 址 的 输入 域 
url 规定 包含 URL 地 址 的 输入 域 
number 规定 包含 数值 的 输入 域 
range 规定 包含 一 定 范围 内 数字 值 的 输入 域 ，value 的 默认 值 范围 是 0 一 100， 显 示 为 滑动 条 
date pickers 日 期 选择 域 
color 颜色 选择 域 
Search 搜索 域 
Tt 三 


<input type="text" /> 

定义 单行 文本 框 ， 文 本 框 的 默认 宽度 是 20 个 字符 。 

2) password 

<input type="password" /> 

定义 密码 域 ， 密 码 域 中 的 字符 会 被 掩 码 ( 显示 为 星 号 或 原点 )。 
3) radio 


<input type="radio" /> 
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定义 单 选 按钮 ， 单 选 按钮 允许 用 户 在 一 定数 目的 选择 项 中 必须 上 且 仅 能 选取 一 个 。 
4) checkbox 


<input type="checkbox" /> 

定义 复 选 框 ， 复 选 框 允许 用 户 在 一 定数 目的 选择 项 中 不 选 或 者 选取 一 个 或 多 个 。 
5) hidden 

<input type="hidden" /> 

定义 隐藏 域 ， 隐 藏 域 对 于 用 户 是 不 可 见 的 ， 隐 藏 域 通常 会 存储 一 个 默认 值 。 

6) file 

<input type="file" /> 

定义 文件 域 ， 用 于 在 文件 上 传 时 选择 文件 。 


7) image 


<input type="image" /> 
定义 图 像 形式 的 提交 按钮 ,必须 把 src 属性 和 alt 属性 与 <input type="image"> 结 合 使 用 。 
8) button 


<input type="button" /> 


程序 ， 响 应 用 户 。 例 如 : 
<input type="button" value=" 单 击 我 " onclick="alert (' 为 什么 ?')" name="button" /> 
浏览 器 会 显示 一 个 【 单 击 我 】 按 钮 ， 当 单 击 该 按钮 后 会 出 现 敬告 消 Er 
息 框 ， 如 图 7.3 所 示 。 


心 为 Hb? 
CC 下 
<input type="reset" /> 


9) reset 


定义 重 置 按钮 ， 重 置 按钮 会 清除 表单 中 的 所 有 数据 。 图 7.3 消息 框 
10) submit 


<input type="submit" /> 


定义 提交 按钮 ， 提 交 按 钮 用 于 向 服务 器 发 送 表单 数据 ， 数 据 会 发 送 到 表单 的 action 属 
性 指定 的 位 置 。 


11) email 
<input type="email" /> 


定义 包含 e-mail 地 址 的 输入 域 ， 在 提交 表单 时 会 自动 验证 email 域 的 值 。 
12) url 


<input type="url" /> 


定义 包含 URL 地 址 的 输入 域 ， 在 提交 表单 时 会 自动 验证 ul 域 的 值 。 
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13) number 

<input type="number" /> 

定义 包含 数值 的 输入 域 ， 在 浏览 器 中 可 以 显示 为 微调 框 ， 用 来 改变 文本 框 中 的 值 。 用 
户 可 以 使 用 max 和 min 属性 规定 输入 数值 的 最 大 值 和 最 小 值 , 让 输入 的 数据 在 合法 的 值 范 
围 内 。 用 户 也 可 以 使 用 step 属性 规定 合法 的 数字 间隔 , 例如 step="2", 则 合法 的 数 是 -2、0、 
2、4 等 ， 每 次 用 微调 框 的 上 /下 箭头 调整 值 时 按 step 值 增加 或 减少 。 

14) range 


<input type="range" /> 


定义 包含 一 定 范围 内 数字 值 的 输入 域 ,range 类 型 显示 为 滑动 条 , 默认 值 范 围 是 0 一 100， 
可 以 同时 使 用 max、min 和 step 属性 。 
15) date pickers 


<input type="date pickers" /> 


定义 日 期 选择 域 ， 显 示 为 微调 框 和 下 拉 框 的 组 合 。HTML5 拥有 以 下 多 个 选取 日 期 和 
时 间 的 输入 类 型 。 
。 date: 选取 日 、 月 、 年 。 
month: 选取 月 、 年 。 
week: 选取 周 和 年 。 
time: 选取 时 间 《〈 小 时 和 分 钟 )。 
datetime: 选取 时 间 、 上 日、 月、 年 (UTC 时 间 )。 
datetime-local: 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 
16) search 


<input type="search" /> 


用 于 搜索 域 ， 例 如 站 点 搜索 或 Google 搜索 。search 显示 为 常规 的 文本 框 。 


17) color 
type="text" 姓名 
type= "password" 密码 
<input type="color" /> type="radio" 性 别 日 男 


用 于 颜色 选择 域 ， 在 输入 时 会 打开 


调 色 板 选取 颜色 。 三 一 
[ 圆 72 HIML5(Ginput type)html， Spe 
在 该 页 面 中 使 用 了 不 同 的 表单 输入 元 . Me 
素 ， 如 图 7.4 所 示 。 视频 讲解 ee 
源 代码 如 下 : ri on 
type="button" 普通 按 包 并 
<head> type="reset" 重重 控 氏 Ea 
<title>input 标签 的 type 属性 </title> pe submit MR 
</head> 图 7.4 HTML5(input type).html 示意 图 
<body> 


<form action="HTML5 (form action) .html" method="get"> 
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<label>type="text" 姓名 <input type= "text" name="name" id="name"> 

</label><br> 

<label>type="password” 密码 <input type="password" name="password" id= 

"password"></label><br> 

<label>type="radio" 性 别 </label> 

<label for="nan"><input type="radio" name="sex" value=" 男 " id="nan"> 

男 </label> 

<label for="nv"><input type="radio" name="sex" Value=" 女 " id="nv"> 女 

</label><br> 

<label>type="checkbox" 爱好 </1label> 

<label><input type="checkbox" name="interest" value=" 计 算 机 "> 计算 机 

</label> 

<label><input type="checkbox" name="interest" value=" 户 外 "> 户外 </1label> 

<label><input type="checkbox" name="interest" value=" 文 学 "> 文学 </label> 
<br> 
<label>type="hidden" <input type="hidden" name="country" value=" 中 国 "> 
</label><br> 
<label>type="file" 文件 <input type="file" name="file"></label><br> 
<label>type="email"” 电子 邮件 <input type="email"></label><br> 
<label>type="url" 网 址 <input type="url"></label><br> 
<label>type="number" 数值 <input type="number" max="30" min="1" 
value="1"></label><br> 
<label>type="date" 日 期 <input type="date" max="2016-07-15" min= 
"2016-07-01" value="2016-07-01"></label><br> 
<label>type="range" 范围 <input type="range" value="50"></label><br> 
<label>type="color" 颜色 <input type="color"></label><br> 
<label>type="search" 关键 字 <input type="search" value="HTML5"> 
</label><br> 
<label>type="image" 图 像 按钮 <input type="image" src="images/w3c 
home.png" alt=" 图 像 按 钮 ”title=" 提 交 " name="image"></label><br> 
<label>type="button" 普通 按钮 <input type="button" value=" 单 击 我 " 
onclick="alert (' 为 什么 2')" name="button"></label><br> 
<label class="title">type="reset 按钮 <input type="reset" name="reset"> 
</label><br> 
<label class="title">type="submit" 提交 按钮 <input type="submit" name="submit"> 
</label> 

</form> 

</body> 


提示 : 浏览 器 在 区 别 表 单 域 元 素 时 ， 有 的 用 name 属性 ， 有 的 用 id 属性 ， 所 以 最 好 都 
用 ,例如 <input type="text" name="name'" id="name" />, 由 于 单 选 按 钮 是 一 组 按钮 ,所 以 name 
属性 值 要 相同 ， 可 以 用 id 属性 区 分 组 内 不 同 的 单 选 按钮 。 复 选 框 也 是 如 此 。 

四 value 属性 

value 属性 用 于 为 input 元 素 设 定 值 。 对 于 不 同 的 输入 类 型 ，value 属性 值 的 含义 不 同 : 

(1) 如 果 type 类 型 是 button、reset 和 submit，value 定义 按钮 上 显示 的 文本 。 
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(2) 如 果 type 类 型 是 text、password 和 hidden，value 定义 域 的 初始 值 。 

(3) 如 果 type 类 型 是 checkbox、radio、image，value 定义 与 输入 相关 联 的 值 。 

单 选 按钮 和 复 选 框 必 须 设 置 value 属性 ， 文 件 域 不 能 使 用 value 属性 。 

全 accept 属性 

accept 属性 只 能 与 <input type="file"> 配 合 使 用 ， 规 定 通 过 文件 上 传 提交 的 文件 类 型 ， 
属性 值 是 在 MIME 列表 中 定义 的 。 为 了 避免 使 用 该 属性 ， 最 好 在 服务 器 端 验证 文件 上 传 的 
类 型 。 例 如 下 面 代码 中 文件 上 传 的 类 型 可 以 接受 GIF 和 JPEG 两 种 图 像 : 


<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 


如 果 不 限 制图 像 的 格式 ， 可 以 写 为 “accept="image/*"”。 

@ form 居 性 

form 属性 规定 input 元 素 所 属 的 一 个 或 多 个 表单 ， 属 性 值 必须 是 其 所 属 表单 的 4。 如 
果 input 元 素 属于 多 个 表单 ， 用 空格 符 分 隔 表 单 的 id 名 ， 但 目前 浏览 器 测试 都 不 支持 。 

表单 重 写 属性 只 能 用 于 type="submit" 提 交 按 钮 和 type="image" 图 像 提 交 按 钮 ， 分 别 是 
formaction formmethod、 formnovalidate 和 formtarget 属性 , 用 来 重 写 表单 的 action、 method、 


novalidate 和 target 属性 。 PR 

圆 73 HTML5(input_form).html， 在 该 页 面 中 ， 单位 ; 
表单 <form id-"forml'> 带 有 两 个 提交 按钮 ， 文 本 杠 a 
<input type="text” name="age” form="form2"> 位 于 昵称: 
<form id="form2"> 表 单元 素 之 外 ， 但 仍然 是 表单 的 一 坊 : [一 
部 分 ， 如 图 7.5 所 示 。 

源 代码 如 下 : 图 7.5 HTML5(input_form).html 示意 图 

<head> 

<title> 表 单 重 写 属性 </title> 
</head> 
<body> 


<form action="HTML5 (form action) .html" method="get" id="forml"> 
<label> 姓 名 :<input type="text" name="name" id="name"></label><br> 
<labe1> 单 位 :<input type="text" name="unit" id="unit" autocomplete= 
"off"></label><br> 
<label>Email:<input type="email" name="email" id="email"></label><br> 
<input type="submit" value=" 提 交 "> 
<input type="submit" formaction="HTML5 (form action)admin.html" 
formmethod="post" value=" 向 管理 员 提交 "> 

</form> 

<form action="HTML5 (form action) .html" method="get" id="form2"> 
<1label> 了 昵称 :<input type="text" name="namel" id="namel"></label><br> 
<input type="submit" value=" 提 交 "> 

</form> 

<label> 年 龄 : <input type="number" name="age" form="form2" min="10" max="99"> 
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</label> 
</body> 


@ autofocus 属性 
autofocus 属性 规定 在 页 面 加 载 时 表单 域 自动 获得 焦点 ， 该 属性 适用 于 所 有 <input> 标 
签 的 类 型 。 
@ multiple 居 性 
mnultiple 属性 规定 在 输入 域 中 可 选择 多 个 值 , 该 属性 适 
@@ pattern 属性 
pattern 属性 规定 input 输入 域 验证 的 模式 〈 正 则 表达 式 )， 在 输入 时 必须 按照 这 种 模式 
进行 匹配 。 例 如 pattem="[0-9]" 表 示 输 入 值 必须 是 0 一 9 的 数字 。pattern 属性 适用 于 text、 
search、url、telephone、email 和 password 类 型 的 <input> 标 签 。 
@@ placeholder 属性 
placeholder 属性 提供 输入 域 占 位 符 ， 用 于 描述 所 希望 输入 的 值 。placeholder 属性 适用 
于 text、search、url、telephone、email 和 password 类 型 的 <input> 标 签 。 占 位 符 在 输入 域 为 
空 时 显示 ， 在 输入 域 获得 焦点 时 消失 。 
@ required 属性 
required 属性 规定 必须 在 提交 表单 之 前 填写 〈 不 能 为 空 )。required 属性 适用 于 text、 
search、 url、 telephone、email、password、datepickers、number、checkbox、radio 和 file 类 
型 的 <input> 标 签 。 
全 height 和 width 属性 
height 和 width 属性 定义 image 类 型 
的 <input> 标 签 的 图 像 高 度 和 宽度 。 
圆 74 HIML5dom attr)html， 在 
该 页 面 中 ， 姓 名 输入 字段 使 用 了 placeholder 
属性 ,身份 证 输入 字段 使 用 了 required 属性 ， 
单位 输入 字段 使 用 了 autofocus 属性 ， 文 件 
输入 字段 使 用 了 multiple 属性 ， 电 话 输入 字 图 7.6 HTML5(form attr).html 示意 图 
段 使 用 了 pattern 属性 ， 提 交 按钮 使 用 了 图 像 ， 如 图 7.6 所 示 。 
源 代码 如 下 : 
<head> 
<title>HTML5 表单 域 属性 </title> 
</head> 
<body> 
<h2>HTML5 表单 域 属性 </h2> 
<form action="HTML5 (form attr) .html" method="get"> 
<label> 姓 名 :<input type="text" name="name" id="name" placeholder=" 请 输 
入 实名 "></label><br> 
<label> 身 份 证 :<input type="text" name="idcard" id="idcard" required= 
"required"></label><br> 


于 email 和 file 类 型 的 <input> 


[Ob Er 
视频 讲解 
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<labe1> 单 位 :<input type="text" name="unit" id="unit" autofocus= 
"autofocus"></label><br> 
<label1> 文 件 :<input type="file" name="img" multiple="multiple"></label> 
<br> 
<label> 电 话 :<input type="text" name="phone" id="phone" pattern="[0-9]"> 
</label><br> 
<input type="image" src="images/html5.png" height="50" width="100" 
alt="H5"></form> 

</body> 


7.2.2 <textarea> 标 签 


<textarea> 标 签 定义 多 行文 本 区 域 , 在 文本 区 域 中 可 容纳 无 限 数量 的 文本 ， 其 中 文本 的 


属 性 描 述 
cols 多 行文 本 区 域 的 可 见 列 数 
rOWS 多 行文 本 区 域 的 可 见 行 数 


hard i i 
SO 

NI 项 用 该 文本 区 基 

am 六 区 的 

i 二 区 项 办 

Eee 证 广 术 区 央 的 最 大 于 和 


@ cols 和 rows 属性 

用 户 可 以 通过 cols 和 rows 属性 来 规定 <textarea> 的 大 小 , 例如 下 面 的 代码 将 <textarea> 
区 域 设置 为 5 行 40 列 。 

<textarea rows="5" cols="40"> 

在 Web 前 端 技术 课程 里 可 以 学 习 你 所 需要 的 知识 。 


</textarea> 


@ wrap 局 性 
wrap 属性 设置 多 行文 本 域 的 换行 模式 。 在 通常 情况 下 ， 当 用 户 在 文本 区 域 中 输入 文本 
只 有 在 按 回 车 键 的 地 方才 会 换行 。 
wrap 属性 的 默认 值 为 "soft"， 当 表单 提交 时 ，textarea 中 的 文本 不 换行 。 
如 果 希 望 启动 自动 换行 功能 ， 将 wrap 属性 设置 为 "hard"。 当 用 户 输入 的 一 行文 本 超过 
文本 区 域 的 宽度 时 ， 浏 览 器 会 自动 将 多 余 的 文字 挪 到 下 一 行 。 当 表单 提交 时 ，textarea 中 的 
文本 包含 换行 符 。 注 意 ， 在 使 用 "hard" 时 必须 使 用 cols 属性 。 

[ 贺 7.S HTIML5(textarea).html, 在 该 页 面 中 将 以 下 60 个 字符 的 文本 输入 到 一 个 20 个 
字符 宽 的 文本 区 域内 。 


后 
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Word wrapping is a feature that makes life easier for users. 
如 果 设置 为 wrap="soft"， 在 提交 文本 的 URL 编码 里 没有 换行 符 。 
word+wrapping+is+a+feature+that+makes+1life+easier+for+users . 


如 果 设置 为 wrap="hard"， 在 提交 文本 的 URL 编码 里 有 3 个 换行 符 ,“%0d%0a” 是 回 
车 换行 的 URL 编码 。 


word+wrapping+ist+a+%0D%S0Afeaturet+that+makes+%0D%0Alifeteasier+for+%0D%0 


Ausers. 
其 效果 如 图 7.7 所 示 。 源 代码 如 下 : 
<head> 

<title>textarea 标签 </title> 
</head> 
<body> 


<form action="HTML5 (form action) .html"> 
<textarea name="t1" cols="20" wrap="hard">word wrapping isa feature that 
makes life easier for users.</textarea><br> 
<input type="submit" value=" 提 交 "> 

</form> 

</body> 


HTNLS (form _action). html ?+t 


图 7.7 HTML5(textarea).html 提交 文本 示意 图 


7.2.3 ”<label> 标 签 


<label> 标 签 为 input 元 素 定义 标注 。<label> 标 签 的 for 属性 可 以 把 <label> 绑 定 到 id 属 
性 值 和 for 属性 值 相同 的 元 素 上 ， 这 样 在 label 元 素 内 单 击 文本 ， 浏 览 器 会 自动 将 焦点 转移 
到 和 label 绑 定 的 元 素 上 。 

在 实例 HTML5(input_type).html 中 ,“ 性 别 ” 单 选 按钮 实现 了 这 样 的 绑 定 , 源 代码 如 下 : 

<labe1> 性 别 </label> 

<input type="radio" name="sex" value=" 男 " id="nan"> 

<label for="nan"> 男 </label> 

<input type="radio" name="sex" value=" 女 " id="nv"> 

<label for="nv"> 女 </label> 

当 单 击 <label for="nan"> 男 </label> 里 的 “ 男 ” 时 会 自动 选中 <input type="radio" name= 
"sex" value=" 男 " id="nan" /> 单 选 按 钮 。 


7.2.4 <fieldset> 标 签 


<fieldsef> 可 以 将 表单 内 的 相关 元 素 分 组 ， 当 一 组 表单 元 素 被 放 到 <fieldset> 标 签 内 时 ， 
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浏览 器 会 以 特殊 方式 来 显示 它们 ， 它 们 可 能 有 特殊 的 边界 和 3D 效果 。 
<legend> 标 等 为 <fieldset> 定 义 分 组 标题 。 
圆 76 HTML5(form fieldset).html， 演 示 了 <fieldset> 标 签 的 用 法 ， 如 图 7.8 所 示 。 


三 刍 康信 息 
身高 : 体重 ， 


图 7.8 HTML5(form fieldseb .html 示意 图 


源 代 码 如 下 : 
<head> 
<title>fieldset 和 Legend 标签 </title> 
</head> 
<body> 
<form action="html5 (form action) .html" method="get"> 
<fieldset> 
<legend> 健 康信 息 </legend> 
<label1> 身 高 : <input type="text"></label> 
<labe1l> 体 重 : <input type="text"></label> 
</fieldset> 
</form> 
</body> 


7.2.5 ” <select> 标 签 


<selec 亿 标签 可 以 创建 单 选 或 多 选 列表 ， 当 提交 表单 时 ， 浏 览 器 会 提交 选 定 的 项 目 。 
<select> 标 签 的 常用 属性 见 表 7.6。 
表 7.6 <select> 标 签 的 常用 属性 
值 


属 性 描 述 


disabled | disabled 禁用 列表 
multiple | multiple 可 选择 列表 的 多 个 选项 
name | name 列表 名 称 


size number 列表 中 可 见 选项 的 数目 


如 果 size 属性 的 值 大 于 1， 但 是 小 于 列表 中 选项 的 总 数目 ， 浏 览 器 会 显示 出 列表 框 ， 
显 


表示 可 以 查看 更 多 选项 ， 否 则 浏览 器 会 显示 出 下 拉 列 表 杠 。 
7.2.6 ”<option> 标 签 


<option> 标 签 定义 列表 中 的 一 个 选项 ， 浏 览 器 将 <option> 中 的 内 容 作 为 <selecfe> 标 签 列 
常用 属性 见 表 7.7。 
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表 7.7 <option> 标 签 的 常用 属性 
值 
disabled 
text 


属 性 
disabled 

label 
selected 


描 述 
选项 在 首次 加 载 时 被 禁用 
使 用 <optgroup> 时 的 标注 
选项 表现 为 选中 状态 
送 往 服务 器 的 选项 值 


selected 


value text 


<option> 标 签 可 以 在 不 带 有 任何 属性 的 情况 下 使 用 , 但 通常 需要 使 用 value 属性 , value 
属性 是 当选 项 被 选中 时 发 送 给 服务 器 的 内 容 。 如 果 列 表 选 项 很 多 ， 可 以 使 用 <optgroup> 标 
签 对 相关 选项 进行 组 合 。 


7.2.7 ”<optgroup> 标 签 


<optgroup> 标 签 用 于 组 合 选项 ， 当 使 用 一 个 长 的 选项 列表 时 ， 对 相关 的 选项 进行 组 合 
会 使 处 理 更 加 容易 。<optgroup> 标 签 的 常用 属性 见 表 7.8。 


表 7.8 <optgroup> 标 签 的 常用 属性 


属 性 描述 
label 选项 组 描述 或 标注 
disabled disabled 禁用 该 选项 组 


[而 77 HIML5dom selecbhtml， 
使 用 了 <select> 标 签 和 <option> 标 签 建 
立 列表 ， 并 通过 <optgroup> 标 签 把 相 
关 的 选项 组 合 在 一 起 ， 如 图 7.9 所 示 。 


源 代码 如 下 : 图 79 HTML5(form select).html 示意 图 视频 讲解 
<head> 
<title>select 和 option 标 签 </tit1le> 
</head> 
<body> 
<select> 
<optgroup label=" 行 政 单位 "> 
<option value=" 教 务 处 "> 教务 处 </option> 
<option value=" 人 事 处 "> 人 事 处 </option> 
</optgroup> 
<optgroup label=" 教 学 单位 "> 
<option value=" 数 学 系 "> 数学 系 </option> 
<option value=" 信 息 学 院 "> 信 息 学 院 </option> 
</optgroup> 
</select> 
</body> 


7.2.8 <button> 标 签 


<button> 标 签 定义 一 个 按钮 。 在 <button> 内 部 可 以 放置 内 容 ， 比 如 文本 或 图 像 ， 这 是 使 
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用 该 标签 与 使 用 <input> 标 签 所 创建 按钮 的 不 同 之 处 。 

<button> 与 <input type="button"> 相 比 ， 提 供 了 更 为 强大 的 功能 和 更 丰富 的 内 容 。 
<button> 和 </button> 标 签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 ， 例 如 可 以 在 按钮 中 包括 一 个 图 


像 和 相关 的 文本 。<button> 标 签 的 常用 属性 见 表 7.9。 
表 7.9 <button> 标 签 的 常用 属性 

属 性 值 描述 
disabled disabled 禁用 按钮 
name name 按钮 名 称 

button 
type reset 按钮 类 型 

submit 
value text 按钮 显示 的 初始 值 


按钮 需要 定义 type 属性 , 正 浏览 器 中 默认 类 型 是 button， 而 其 他 浏览 器 中 默认 类 型 是 
submit。 

在 表单 中 使 用 <button>， 不 同 的 浏览 器 会 提交 不 同 的 值 。 正 浏览 器 提交 <button> 和 
</button> 之 间 的 文本 ， 而 其 他 浏览 器 将 提交 value 属性 的 内 容 。 


7.2.9 <datalist> 标 签 


<datalist> 标 签 定义 选项 列表 , 应 与 <input> 标 签 一 起 使 用 来 选择 <input> 可 能 的 值 ， 需 使 
用 <input> 标 签 的 list 属性 ， 通 过 引用 <datalist> 的 id 值 绑 定 <datalist> 。 

列表 是 ea <option> 标 签 必须 要 设置 value 属性 。<datalist> 及 其 
选项 在 网 页 上 开始 不 会 被 显示 ， 当 单 击 向 下 箭头 时 才 显 示 输 入 列表 值 。 

加 73 HTML5(datalist).html， 使 用 了 <datalist> 标 签 和 <input> 标 签 建 立 组 合 输入 列表 
框 ， 如 图 7.10 所 示 。 


: 了 | | 提交 | 


http://www. w3school. com. cn WSchool 


http: AHwww google. com 


http:/ /www. baidu com 


http: /fwww. w3school. com. en 


视频 讲解 


图 7.10 HTML5(datalist).html 示意 图 
源 代码 如 下 : 


<head> 
<title>datalist 标签 </title> 
</head> 
<body> 
<form action="HTML5 (form action) .html" method="get"> 
友情 链接 : <input type="url" list="url list" name="link"> 
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<datalist id="url list"> 


<option label="W3School" value="http://www.w3school.com.cn/"> 
<option label="Google" value="http://www.google.com/"> 
<option label=" 百 度 " value="http://www.baidu.com/"> 
</datalist> 
<input type="submit"> 
</form> 


7.2.10 <output> 标 签 


<output> 标 签 定义 不 同类 型 的 输出 ， 例 如 计算 或 脚本 输出 等 。 
<output> 标 签 常用 一 个 for 属性 规定 计算 中 使 用 的 元 素 与 计算 结果 之 间 的 关系 , 其 值 是 
-个 或 多 个 元 素 的 id 列表 ， 以 空格 分 隔 。 
加 1» HTML5(output).html， 使 用 了 <output> 标 签 ， 其 中 oninput 事件 在 表单 元 素 的 
value 值 改 变 时 触发 ， 如 图 7.11 所 示 。 


50 51 人 


图 7.11 HTML5(output).html 示意 图 


源 代码 如 下 : 

<head> 
<title>output 标签 </title> 

</head> 

<body> 

<form oninput="out .value=parseInt (numl .value)+parseInt (num2 .value) "> 
<input type="number" id="numl" value="50"> 
+<input type="number" id="num2" value="50"> 
=<output name="out" for="numl num2"></output> 

</form> 

</body> 


7.3 ” 叮 叮 书店 “联系 我 们 ”页 面 的 建立 


启动 WebStorm， 打 开 叮 叮 书店 项 目 ， 新 建文 件 contactl.html。 在 “ 联 视频 讲解 
系 我 们 ”页 面 中 应 用 了 常见 的 表单 域 元 素 ， contactl.html 在 浏览 器 中 的 预览 效果 如 图 7.12 
所 示 ， 其 源 代码 如 下 : 
<head> 
<title> 联 系 我 们 </title> 


</head> 
<body> 
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<section class="contacts"> 
<span class="icon-contact"></span> 
<h2> 联 系 我 们 </h2> 
<p class="details"> 叮 叮 书 店 成 立 于 2016 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综 
合 出 版 单位 ， 植 根 于 “清华 ”这 座 和 久负盛名 的 高 等 学 府 ， 秉 承 清 华人 “自强 不 息 ， 厚 德 载 物 ” 
的 人 文 精神 。</p> 
<fieldset class="contact-form"> 
<legend class="form-subtitle"> 需 要 填写 以 下 内 容 </legend> 
<form action="index.html" method="get" id="contact"> 
<div class="form-row"> 
<label class="contact"><strong> 姓 名 : </strong> 
<input type="text" name="name" id="name" required= 
"required" placeholder=" 必 填 " autofocus="autofocus" 
class="contact-input"></label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 性 别 : </strong></label> 
<label><input name="sex" type="radio" id="sexl" value=" 男 " 
checked="checked"> 男 </1label> 
<label><input name="sex" type="radio" id="sex2" Value=" 女 "> 
女 </label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 年 龄 范围 ， </strong> 
<select name="age" size="1" id="age"> 
<option value="1">18 岁 以 下 </option> 
<option value="2" selected="selected">18-28 岁 </option> 
<option value="3">28-38 岁 </option> 
>38-48 岁 </option> 
>48 岁 以 上 </option> 


<option value= 
<option value= 
</select> 
</label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 爱 好 : </strong></label> 
<label><input type="checkbox" name="interest" value=" 网 络 " 
id="interest1"/> 网 络 </1label> 
<label><input type="checkbox" name="interest" value=" 数 据 库 " 
id="interest2"/> 数 据 库 </Labe1> 
<label><input type="checkbox" name="interest" value=" 编 程 " 
id="interest3"/> 编 程 </label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 电 子 邮 件 : </strong> 


<input type="email" name="email" id="email" required= 
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"required" placeholder=" 必 填 " 


class="contact-input"></label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 固 定 电话 : </strong> 
<input type="text" name="telephone" id="telephone" 
required="required" pattern="[0-9]" 
placeholder=" 必 填 " class="contact-input"></label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 公 司 : </strong> 
<input type="text" name="company" id="company" required= 
"required" placeholder=" 必 填 " 
class="contact-input"></label> 
</div> 
<div class="form-row"> 
<label class="contact"><strong> 内 容 : </strong> 
<textarea name="content" id="content" cols="20" rows="3" 
class="contact-input"></textarea></label> 
</div> 
<div class="form-row-button"> 
<input type="reset" value=" 取 消 " class="send">&gnbsp; 
<input type="submit" value=" 发 送 " class="send"> 
</div> 
</form> 
</fieldset> 
</section> 
</body> 


提示 : 用 <div> 区 分 表单 域 的 不 同行 ， 为 每 个 表单 域 加 上 标注 ， 类 名 是 以 后 定义 样式 时 
使 用 的 。 


联系 我 们 


叮 叮 书店 成 立 于 1980 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主 
办 的 综合 出 版 单位 ， 植 根 于 “清华 “这 座 和 久负盛名 的 高 等 
学 府 ， 秉承 清华 人 “自强 不 息 ， 厚 德 载 物 “的 人 文 精神 。 


需要 填写 以 下 内 容 


图 7.12 ”contactl .html 预览 示意 图 
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7.4 为 叮 叮 书店 首页 添加 站 内 搜索 


启动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html (在 第 5 章 的 5.4 
节 建 立 )， 进 入 代码 编辑 区 ， 添 加 站 内 搜索 ， 操 作 步 骤 如 下 : 

将 光标 定位 到 “<div id-"search">” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 的 
代码 : 

<form action="index.html" method="get"> 


<input type="search" placeholder=" 站 内 搜索 "><input type="submit" value=" 搜 索 "> 
</form> 


视频 讲解 


7.5 小结 


本 章 介绍 了 HTMLS5 表单 的 基本 概念 和 结构 ， 详 细 介 绍 了 表单 域 的 各 种 元 素 及 用 法 ， 
通过 叮 叮 书店 “联系 我 们 ”页 面 详细 介绍 了 表单 的 应 用 。 


7.6 习题 


@ 选择 题 

(1) 在 HTML5 中 ，<form action=?> 中 的 action 表示 ( 5 
A， 提交 的 方式 B. 表单 所 用 的 脚本 语言 
C. 提交 的 URL 地 址 D. 表单 的 形式 


(2) 下 列 选项 能 实现 列表 项 多 选 的 是 3 
A. <select multiple="multiple"> 
B. <samp></samp> 
C. <select disabled="disabled"> 
D. <textarea wrap="off'></textarea> 
(3) 在 HTML5 中 ，( ) 属性 用 于 规定 输入 字段 是 必 填 的 。 


A. required B. formvalidate 

C. validate D. placeholder 
(4) 下 列 输入 类 型 中 ( ) 定义 滑 块 控件 。 

A. search B. controls 

C. slider D. range 


(5) 若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ， 以 下 方法 中 正确 的 是 (  ”)。 
A. <input type="text" rows="4" cols="30" name="txtintrol"> 
B. <textarea rows="4" cols="30" name="txtintro"> 
C. <textarea rows="4" cols="30" name="txtintro"></textarea> 
D 


. <textarea rows="30" cols="4" name="txtintro"></textarea> 
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@ 简 答 题 


(1) 表单 发 送 数据 有 哪些 方法 ? 各 有 什么 优 /缺点 ? 


(2 
C33 
(4 
(33 


su 


HIMLS 为 什么 增加 表单 重 写 属性 ? 
普通 按钮 与 重 置 按钮 和 提交 按钮 有 什么 
<label> 标 签 如 何 与 元 素 绑 定 ? 
<option> 标 签 的 selected 属性 值 是 什么 ? 


区 | 
注 
三 
心 


第 7 章 HTML5 表单 07 


107 | 


在 Web 标准 中 ， 表 现 是 赋予 页 面 内 容 显示 的 样式 ， 包 括 版 式 、 颜 色 和 大 小 等 。 也 就 是 
说 ， 页 面 中 显示 的 内 容 放 在 结构 里 ， 而 修饰 、 美 化 放 在 表现 里 ， 做 到 结构 ( 内容 ) 与 表现 
分 开 ， 这 样 当 页 面 使 用 不 同 的 表现 时 呈现 的 样式 是 不 一 样 的 ， 就 像 人 穿 了 不 同 的 衣服 ， 表 
现 就 是 结构 的 外 衣 ，W3C 推荐 使 用 CSS 来 完成 表现 。 本 章 首先 介绍 CSS 基本 概念 和 语法 ， 
接 下 来 重点 讲解 CSS 选择 器 和 CSS3 增加 的 选择 器 ， 然 后 讨论 如 何 使 用 CSS， 最 后 对 CSS 
层 登 性 进行 了 说 明 。 

本 章 要 点 : 

如 CSS 语法 。 

如 CSS 选择 器 。 

妇 CSS3 选择 器 。 

他 使 用 CSS。 

人 CSS3 媒体 查询 。 

如 CSS 层 符 性 。 


8.1 CSS 概述 


HTML 标签 原本 被 设计 用 来 定义 文档 内 容 , 但 由 于 主要 的 浏览 器 不 断 地 将 新 的 HTML 
标签 和 属性 (比如 字体 标签 和 颜色 属性 ) 添加 到 HTML 规范 中 ， 这些 标签 和 属性 主要 用 于 
表现 ， 使 得 文档 内 容 和 表现 的 区 分 越 来 越 困难 。 为 了 解决 这 个 问题 ，W3C 提出 CSS，CSS 
定义 了 如 何 显示 HTML 元 素 。 

CSS (Cascading Style Sheets,“ 层 又 样式 表 ” 或 “级 联 样 式 表 ”) 是 一 组 格式 设置 规则 ， 
于 控制 页 面 的 外 观 。 使 用 CSS 的 优点 如 下 : 

(1) 表现 和 内 容 (结构 分 离 。 

将 表现 部 分 分 离 出 来 放 在 一 个 独立 的 样式 文件 中 ，HTML 文件 只 存放 内 容 文 本 ， 这 样 


三 
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的 页 面 对 搜 索引 擎 更 加 友好 。 一 一 
(2) 提高 页 面 浏览 速度 。 i 
采用 CSS 的 页 面 文件 比较 小 。 
(3) 易于 维护 和 改版 。 i 
用 户 通过 修改 CSS 文件 就 可 以 

重新 改版 整个 网 站 的 页 面 。 
(4) CSS 符合 W3C 标准 。 
先 感性 体验 一 下 CSS, 图 8.1 所 | 

示 为 一 个 没有 任何 表现 的 HIML 文 | 

件 ( 源 自 “http://www.csszengarden. 

com/”)， 只 有 内 容 结构 ， 是 一 个 普通 |iwvicimstion 

的 页 面 。 通 过 给 这 个 文件 添加 不 同 的 


CSS 规则 就 可 以 得 到 十 分 美观 、 显 示 


不 同样 式 的 网 页 ， 


内 容 不 变 ， 通 过 设 图 8.1 zengarden-sample.html 示意 图 


计 不 同 的 表现 能 让 网 页 显示 不 同 的 外 观 样式 ， 如 图 8.2 (http://www.csszengarden.com/214/) 
和 图 8.3 (http://www.csszengarden.com/208/) 所 示 。 


提示 : 用 户 可 以 在 谷歌 浏览 器 中 安装 Web Developer 插件 , 通过 Web Developer 工具 栏 
禁用 所 有 的 CSS， 观 察 页 面 没有 CSS 时 显示 的 效果 ， 其 下 载 地 址 为 “http://chrispederick. 
com/Wwork/web-developer/” 


C33 ZEN OARDEN 


ign 


A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it 


into this page 


Download the example 国 and 转 


THE ROAD TO ENLIGHTENMENT 


Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, 


and abandoned browsers. 


We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the 


W3C, WASP, and the major browser creators 


The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. 


Leamn to use the time-honored techniques in new and invigorating fashion. Become one with the web 


SO WHAT IS THIS ABOUT? 


There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire. and encourage 


图 8.2 “http://www.csszengarden.com/214/” 示 意图 
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CSS Zen Garden 


The Beauty of CSS Design 


从 

Select a Design A demonstration of what can be accomplished through Cs5-based 
design. Select any style sheet from the list to load it into this page. 

* Mid Century Modern 

ht Download the example htm file and css file 

» Garments 

by Dan Mall The Road to Enlightenment 


Littering a dark and dreary road lay the past relics of browser-specific 


> 而 tags, incompatible DOMs, broken CSS support, and abandoned 


by Steffen Knoeller 


browsers. 

+ Apothecary We must clear the mind of the past, Web enlightenment has been 

by Trent Walton achieved thanks to the tireless efforts of folk like the W3C, WaSP, and 
the major browser creators. 

+ Screen Filler 

by Elliot Jay Stocks The CSS Zen Garden invites you to relax and meditate on the 
important lessons of the masters, Begin to see with clarity, Learn to 

vi use the time-honored techniques in new and invigorating fashion, 

a Become one with the web， 


»A Robot Named Jimmy 有 
by meltmedia So What is This About? 


There is a continuing need to show the power of CSS, The Zen Garden 
aims to excite, inspire, and encourage participation, To begin, view 
some of the existing designs in the list, Clicking on any one will load the 

style sheet into this very page, The HTML remains the same, the only 

加 由 no that has changed is the extemal css file, Yes, realy 


» Verde Moderna 
by Dave Shea 


Archives CSS allows complete and total control over the style of a hypertext 
= document. The only way this can be ilustrated in a way that gets 
people excited is by demonstrating what it can truly be, once the reins 


» Next Designs » 


图 8.3 “http://www.csszengarden.com/208/” 示 意图 


8.2 CSS 语法 


CSS 语法 由 三 部 分 构成 ， 即 选择 器 、 属 性 和 值 。 
selector {property: value} 


选择 器 (selector) 是 指 给 页 面 的 哪个 或 哪些 元 素 定义 样式 ， 通 常 是 希望 定义 样式 的 元 
素 标签 。 属 性 (property) 是 定义 的 具体 样式 ( 例 
如 颜色 、 字 体 等 )， 每 个 属性 都 有 一 个 值 ， 属 性 sn 


a i | ----- 上 ----+---、 
人 全 有 生生 | hi IO Te on ied pg 


组 成 样式 声明 (declaration)， 用户 可 以 定义 多 个 

声明 , 多 个 声明 之 间 用 分 号 隔 开 。 如 图 8.4 所 示 ， ls 
将 hl 元 素 内 的 文字 颜色 定义 为 红色 ， 字 体 大 小 
设置 为 14 像素 。 


提示 : 最 后 一 条 声明 是 不 需要 加 分 号 的 ， 但 建议 在 每 条 声明 的 末尾 都 加 上 分 号 ， 这 样 
当 从 现 有 的 规则 中 增 减 声明 时 会 减少 出 错 的 可 能 性 。 


当 有 多 个 声明 时 ， 建 议 在 每 行 只 描述 一 个 声明 ， 这 样 可 以 增强 样式 的 可 读 性 ， 例 如 : 


图 8.4 CSS 语法 结构 图 
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pl 
text-align: center; 
color: black; 
font-family: arial; 
} 


CSS 对 大 小 写 不 敏感 ， 是 否 包 含 空格 不 会 影响 CSS 在 浏览 器 中 的 效果 。 


8.3 CSS 常用 选择 器 


表 8.1 列 出 了 CSS 常用 选择 器 。 
表 8.1 CSS 常用 选择 器 

选 择 器 简介 
类 型 选择 器 | EL ”| 以 元 素 标签 作为 选择 器 
通 配 选择 器 |* | 所 有 类 型 
包含 选择 器 选择 所 有 被 El 包含 的 E2 元 素 
子 元 素 选择 器 选择 所 有 作为 E1 子 元 素 的 E2 
相 邻 兄弟 选择 器 选择 紧 接 在 元 素 El 之 后 的 所 有 E2 元 素 
这 选择 器 #sID 以 元 素 的 唯一 标识 id 作为 选择 器 
类 选择 器 以 元 素 的 类 名 作为 选择 器 
分 组 选择 器 将 同样 的 定义 应 用 于 多 个 选择 器 ， 选 择 器 以 逗号 分 隔 成 为 组 
属性 选择 器 选择 具有 attr 属性 的 El 元 素 


属性 选择 器 选择 具有 attr 属性 且 属 性 值 等 于 value 的 El 元素 
属性 选择 器 选择 具有 attr 属性 且 属性 值 为 一 个 用 空格 分 隔 的 字 词 列表 ， 其 中 


一 个 等 于 value 的 El 元 素 


r LE 信 为 一 不 用 连 字符 分 卫 风 字 词 列表 ， 
局 性 选择 器 Ee 个 用 连 字符 分 隔 的 字 词 列表 ， 由 


@ 元 素 选 择 器 
元 素 选择 器 就 是 元 素 自 身 ， 在 定义 时 直接 使 用 元 素 标签 名 称 。 例 如 定义 段落 样式 ， 可 


以 选择 p 元 素 的 名 称 ， 即 把 p 作为 选择 器 : 
p{color:green;} 
@ 通用 选择 器 


通用 选择 器 是 一 种 特殊 的 选择 器 ， 用 “* ”表示 ，CSS 中 的 通用 选择 器 与 Windows 通 
配 符 “*” 具 有 相似 的 功能 ， 可 以 定义 所 有 元 素 的 样式 。 例 如 : 
*{font-size:12pzx; /* 定 义 文档 中 的 所 有 字体 大 小 为 12 像素 */} 


上 面 的 样式 将 会 影响 文档 中 的 所 有 元 素 ， 即 文档 中 的 所 有 字体 大 小 都 被 定义 为 12 像 
素 。 用 户 在 使 用 通用 选择 器 时 要 慎重 ， 其 一 般 常 用 于 定义 文档 中 各 种 元 素 的 共同 属性 ， 例 
如 字号 、 字 体 等 。 

上 @ 分 组 选择 器 
肯 户 可 以 对 选择 器 进行 分 组 ， 被 分 组 的 选择 器 将 共享 相同 的 声明 ， 通 常用 逗号 将 需要 


so 
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分 组 的 选择 器 隔 开 。 

在 下 面 的 例子 中 对 所 有 的 标题 元 素 进行 了 分 组 ， 所 有 的 标题 元 素 都 是 绿色 的 。 

hl,h2,h3,h4,h5,h6{color:green;} 

@ 包含 选择 器 

包含 选择 器 是 根据 元 素 在 其 位 置 的 上 下 文 关 系 来 定义 样式 ， 也 称 后 代 选 择 器 。 例 如 在 
下 面 的 代码 中 ， 希 望 列表 中 的 strong 元 素 变 为 斜体 字 ， 而 不 是 默认 的 粗 体 字 。 

<p><strong> 粗 体 字 </strong></p> 

<ol> 

<1i><strong> 和 斜体 字 </strong></1i> 
<1i> 正 常 字体 </1i> 

</ol> 

可 以 定义 如 下 包含 选择 器 ， 这 样 只 有 二 元 素 中 的 strong 元 素 为 斜体 字 。 

1i strong{font-style:italic;font-weight:normal;} 

@@ id 选择 器 

id 选择 器 使 用 元 素 的 id 属性 值 为 元 素 指定 样式 ，id 选择 器 必须 在 元 素 的 id 属性 值 前 
加 “#”。 例 如 : 

#red{color:red;} 

#green{color:green;} 

如 果 应 用 在 下 面 的 HTML 代码 中 , id 属性 值 为 red 的 p 元 素 显示 为 红色 , 而 id 属性 值 
为 green 的 p 元 素 显 示 为 绿色 。 

<p id="red"> 这 个 段落 是 红色 。</p> 

<p id="green"> 这 个 段落 是 绿色 。</p> 

id 选择 器 常用 于 建立 包含 选择 器 。 例 如 : 

#sidebar p{font-style:italic;text-align:right;} 

@ 类 选择 器 

类 选择 器 也 称 自 定义 选择 器 , 使 用 元 素 的 class 属性 值 为 一 组 元 素 指 定 样式 , 类 选择 器 
必须 在 元 素 的 class 属性 值 前 加 “.”。 例 如 : 

.center{text-align:center} 


如 果 应 用 在 下 面 的 HTML 代码 中 ，hl 和 p 元 素 都 有 center 类 ， 这 意味 着 两 者 都 将 遵 
守 .center 选择 器 中 的 规则 。 

<hl class="center"> 这 个 标题 将 被 居中 </h1> 

<p class="center"> 这 个 段落 也 将 被 居中 </p> 

提示 : 类 名 的 第 一 个 字符 最 好 不 使 用 数字 ， 因 为 它 无 法 在 Firefox 浏览 器 中 起 作用 。 

和 id 选择 器 一 样 ， 类 选择 器 也 常 被 用 作 包 含 选择 器 。 例 如 : 
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-one td{color:#F60;background:#666;} 

类 名 为 one 的 元 素 内 部 的 表格 单元 格 都 会 以 灰色 背景 显示 橙色 文字 。 

@ 子 元 素 选择 器 

子 元 素 选择 器 (Child selectors) 只 能 选择 作为 某 元 素 的 子 元 素 声明 样式 ， 子 元 素 选 择 
器 使 用 “>” 号 。 

如 果 希 望 选择 只 作为 hl 元 素 的 子 元 素 strong， 可 以 这 样 写 : 

hl>strong{color:red;} 

这 个 规则 会 把 下 面 代码 中 第 一 个 hl 下 面 的 strong 元 素 变 为 红色 ， 但 是 第 二 个 strong 
不 受 影响 。 

<h1> 这 是 <strong> 非 常 </strong> 重 要 的 </h1> 

<h1> 这 个 <em> 已 经 <strong> 非 常 </strong></em> 重 要 了 </h1> 

提示 ;注意 子 元 素 选择 器 与 包含 选择 器 的 区 别 ， 子 元 素 选择 器 选择 的 元 素 必 须 是 子 元 
素 ， 包 含 选 择 器 选择 的 元 素 有 可 能 不 是 子 元 素 。 

@ 相 邻 兄弟 选择 器 

如 果 需 要 选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 两 者 有 相同 的 父 元 素 ， 可 以 使 用 相 邻 
兄弟 选择 器 〈Adjacent sibling selector)， 相 邻 兄弟 选择 器 使 用 “+” 号 。 

如 果 要 增加 紧 接 在 hl 元 素 后 出 现 的 段落 的 上 边 距 ， 可 以 这 样 写 : 

hl+p{margin-top:50px;} 

@ 儿 种 居 性 选择 器 

属性 选择 器 是 指 对 带 有 指定 属性 的 HIML 元 素 设置 样式 。 

1) 属性 选择 器 
选择 具有 指定 属性 的 元 素 。 例 如 : 
titLel (color: #0D24215>) 
) 属性 和 值 选择 器 
其 选择 具有 指定 属性 且 属 性 值 等 于 指定 值 的 元 素 。 例 如 : 
title="attrselector"] {border: solid lpx #3444FF;} 
虽然 HIMLS 允许 id 和 类 以 数值 开头 ， 但 是 CSS 还 不 允许 使 用 以 数值 开头 的 选择 器 ， 
而 使 用 属性 选择 器 却 可 以 绕 过 CSS 的 限制 。 比 如 [id="10"]。 
3) 属性 和 多 个 值 选择 器 〈 用 “一 ”号 分 隔 ) 
其 选择 具有 指定 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 指定 值 的 
元 素 ， 表 示 用 空格 分 隔 的 字 词 列 表 使 用 “一 ”号 。 例 如 ，; 


title~="selector"] {font-weight: 900;} 


4) 属性 和 多 个 值 选择 器 (用 “|” 号 分 隔 ) 
其 选择 具有 指定 属性 且 属 性 值 为 一 个 用 连 字符 分 隔 的 字 词 列表 ， 由 指定 值 开 始 的 元 
素 ， 表 示 用 连 字符 分 隔 的 字 词 列表 使 用 “|” 号 。 例 如 : 


Le 
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[title|l="attr"] {font-style: italic;} 


贺 8: CSS(selector).html， 说 明了 属性 选择 器 的 使 / 


CSS 属 性 选择 器 


CSS 属 性 选择 器 视频 讲解 
CS33 属 友 话 耕 回 


图 8.5 CSS(selector).html 示意 图 
源 代码 如 下 : 
<head> 
<title>CsS 属性 选择 器 </title> 
<style> 
/* 选 择 具有 title 属性 的 元 素 ， 字 体 为 红色 */ 
[title] {color: #FF0000;} 
/* 选 择 具有 title 属性 且 属 性 值 等 于 "attrselector" 的 元 素 ， 添 加 蓝 色 实 线 边框 */ 
[title="attrselector"] {border: solid lpx #0000FF;} 
/* 选 择 具有 title 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 "selector" 
的 元 素 ， 字 体 加 粗 */ 
[title~="selector"] {font-weight:900;} 
/* 选 择 具有 title 属性 且 属性 值 为 一 个 用 连 字符 分 隔 的 字 词 列表 ， 由 "attzr" 值 开始 的 元 


素 */ 
[title1="attr"]{font-style:italicz)} 
</style> 
</head> 
<body> 
<h2>CSS 属性 选择 器 </h2> 


<p title="attrselector">CSS 属性 选择 器 </p> 

<p title="attr selector">CSS 属性 选择 器 </p> 

<p title="attr-selector selector">CSS 属性 选择 器 </p> 
</body> 


8.4 CSS3 选择 器 


表 8.2 列 出 了 CSS3 增加 的 选择 器 。 
表 8.2 CSS3 增加 的 选择 器 


选 择 器 语 法 简介 

不 相 邻 兄弟 | B1~E2 选择 前 面 有 E1 元素 的 每 个 E2 元 素 。 两 种 元 素 必须 拥有 相同 的 父 
选择 器 元 素 ，E2 不 必 紧 随 El 后 边 

属性 选择 器 “| El[attr*=value] 选择 具有 attr 属性 且 属性 值 以 value 开头 的 每 个 元 素 


选择 具有 attr 属性 且 属 性 值 以 value 结尾 的 所 有 元 素 
选择 具有 attr 属性 且 属 性 值 包含 value 子 串 的 每 个 元 素 


[项 8.2 Css3(selecton).html， 说 明了 CSS3 增加 的 选择 器 的 使 用 ， 如 图 8.6 所 示 。 
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视频 讲解 


图 8.6 CSS3(selector) html 示意 图 
源 代码 如 下 : 
<head> 
<title>CSsS3 增加 的 选择 器 </title> 
<style> 
/* 不 相 邻 兄弟 选择 器 ， 为 h2 后 面 的 ul 添加 红色 虚线 边框 */ 
h2~ul{border: dashed lpx #FF0000;} 
/* 选 择 具有 title 属性 且 属 性 值 以 "attr" 开 头 的 每 个 元 素 ， 添 加 蓝 色 实 线 边框 */ 
[title^="attr"] {border: solid lpx #0000FF;} 
/* 选 择 具有 title 属性 且 属性 值 以 "p" 结 尾 的 所 有 元 素 ， 字 体 加 粗 */ 
[title$="p"] {font-weight: 900;} 
/* 选 择 具有 title 属性 且 属 性 值 包含 "sub" 子 串 的 每 个 元 素 ， 字 体 倾斜 */ 
[title*="sub"] {font-style: italic;} 
</style> 
</head> 
<body> 
<h2>CSS3 增加 的 选择 器 </h2> 
<ul> 
<1i>CSS3 选择 器 </1i> 
<1i>CSS3 选择 器 </1i> 
</ul> 
<p title="attrp">CSS 属性 选择 器 </p> 
<p title="attrp">CSS 属性 选择 器 </p> 
<p title="subpl">CSS 属性 选择 器 </p> 
<p title="subp2">CSS 属性 选择 器 </p> 
<ul> 
<1i>CSS3 选择 器 </1i> 
<1i>CSS3 选择 器 </1i> 
</ul> 
</body> 


8.5 CSS 属性 


8.5.1 CSS 常用 属性 


CSS2.1 版 本 (http://www.w3.org/TR/CSS21/propidx.html) 共有 115 个 标准 属性 ， 见 
表 8.3。 初 学 者 对 此 可 能 会 感到 有 点 难 ， 好 在 CSS 属性 比较 有 规律 ， 另 外 有 一 部 分 属性 基 
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本 不 用 。 
表 8.3 CSS2.1 属性 列表 
属 性 描 述 
azimuth 使 得 用 户 能 感知 一 个 声音 的 特定 水 平方 向 (为 有 视力 障碍 的 人 准备 的 》 
background 简写 属性 ， 在 一 个 声明 中 设置 背景 属性 


background-attachment 
background-color 
background-image 


background-position 


设置 元 素 的 背景 图 片 是 滚动 的 还 是 固定 的 
设置 元 素 的 背景 

设置 元 素 的 背景 图 片 

设置 背景 图 片 的 初始 位 置 


background-repeat 


设置 背景 图 片 是 否 重复 以 及 怎样 重复 


border 


简写 属性 ， 在 一 个 声明 中 设置 border-width、border-style 和 border-color 


border-bottom 


border-bottom-color 


简写 属性 ， 在 一 个 声明 中 设置 下 边框 的 宽度 、 线 条 样式 和 颜色 


border-bottom-style 


样式 


border-bottom-width 


的 


宽 


六 
及 


border-collapse 
border-color 
border-left 
border-left-color 
border-left-style 
border-left-width 
border-right 
border-right-color 
border-right-style 
border-right-width 
border-spacing 
border-style 
border-top 
border-top-color 
border-top-style 


设置 表格 和 单元 格 是 拥有 各 自 的 边框 ， 还 是 共用 一 个 边框 


设置 元 素 的 4 个 边框 的 颜色 
简写 局 性， 在 一 个 声明 中 设置 左边 框 的 兆 度 
4 闫 色 


样式 


的 宽 


:一 个 声明 中 设置 右边 框 的 宽度 、 


的 颜色 
的 线条 样式 


1 边框 的 宽度 

设置 两 个 单元 格 之 间 的 距离 
设置 元 素 的 4 个 边框 的 线条 样式 
简写 属性 ， 在 一 


线条 样式 


声明 中 设置 上 边框 的 宽度 、 


、 线 条 样式 和 颜色 


线条 样式 和 颜色 


R 


R 


线条 样式 和 颜色 


border-top-width 


border-width 设置 元 素 的 4 个 边框 的 宽度 
bottom 与 position 属性 联 用 ， 定 位 元 素 位置 


caption-side 


表格 上 面 还 是 下 面 


clear 
clip 
color 


content 


月 
设置 元 素 的 显示 


悦 


域 


用 于 在 元 素 前 面 或 者 后 面 插入 内 容 


设置 一 个 元 素 文本 内 容 的 前 景色 ， 一 般 指 文字 颜色 


counter-increment 


由 content 属性 中 的 counter0 和 countersO 函 数 确定 ， 用 于 增加 计数 器 的 计数 


counter-reset 


复位 


由 content 属性 中 的 counter0 和 counters0 函 数 确定 ， 用 于 将 计数 器 的 计数 


简写 属性 ， 在 一 个 声明 中 设置 cue-before 和 cue-after 


cue 
cue-after 用 于 在 一 个 元 素 后 播放 一 个 声音 ， 以 便 能 界定 它 〈 为 残障 人 准备 的 ) 
cue-before 用 于 在 一 个 元 素 前 播放 一 个 声音 ， 以 便 能 界定 它 〈 为 残障 人 准备 的 ) 
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续 表 
属 性 描 述 
cursor 为 指针 设备 设置 默认 的 样式 ， 一 般 指 鼠标 样式 
direction 设置 文本 的 书写 方向 (从 左 到 右 或 者 从 右 到 左 ) 
display 强制 转化 一 个 元 素 的 显示 类 型 
elevation 使 得 用 户 能 感知 一 个 声音 的 特定 垂直 方向 (为 有 视力 障碍 的 人 准备 的 》 
empty-cells 设置 空 的 单元 格 是 否 可 见 
float 使 得 元 素 向 左 或 向 右 浮动 
font 简写 属性 ， 在 一 个 声明 中 设置 字体 、 字 体 样式 、 粗 细 、 字 体 大 小 和 行 高 
font-family 设置 一 个 有 优先 权 的 字体 列表 ， 用 来 显示 文本 
font-size 设置 字体 大 小 
font-style 设置 字体 样式 ， 例 如 设置 它 为 斜体 
font-variant 设置 文字 是 否 显示 小 写 首 字 母 
font-weight 设置 字体 的 粗细 
height 设置 元 素 的 高 度 
left 与 position 属性 联 用 ， 定 位 元 素 位 置 


letter-spacing 
line-height 


list-style 


list-style-image 
list-style-position 
list-style-type 
margin 
margin-bottom 
margin-left 
margin-right 
margin-top 


设置 字 之 间 的 距离 

设置 行 高 

简写 属性 ， 在 一 个 声明 中 设置 列表 样式 图 像 标 记 、 列 表 标记 位 置 和 标记 
样式 

设置 列表 样式 图 像 标记 

设置 列表 标记 位 置 ， 应 该 显示 在 由 列表 项 目 所 创建 的 矩形 里 面 还 是 外 面 
设置 列表 标记 样式 

简写 属性 ， 在 一 个 声明 中 设置 上 / 右 /下 / 左 外 边 距 

设置 一 个 元 素 的 下 外 边 距 


设置 左 外 边 距 
设置 - J 右 外 边 距 


设置 一 个 元 素 的 上 外 边 距 


max-height 设置 元 素 的 最 大 高 度 

max-width 设置 元 素 的 最 大 宽度 

min-height 设置 元 素 的 最 小 高 度 

min-width 设置 元 素 的 最 小 宽度 

orphans 设置 打印 网 页 时 一 个 段落 必须 至 少 在 页 底 留 下 多 少 行 

outline 简写 属性 ， 在 一 个 声明 中 设置 outline-width、outline-style 和 outline-color 
outline-color 设置 元 素 轮廓 的 线条 颜 


色 


outline-style 设置 式 

outline-width 设置 元 素 线条 宽度 

overflow 设置 当 一 个 块 状元 素 的 内 容 大 于 父 元 素 时 该 元 素 是 否 被 修剪 
padding 简写 属性 ， 在 一 个 声明 中 设置 上 / 右 /下 / 左 内 边 距 


padding-bottom 


设置 元 素 内 容 到 元 素 下 边框 之 间 的 宽度 


padding-left 设置 元 素 内 容 到 元 素 左边 框 之 间 的 宽度 
padding-right 设置 元 素 内 容 到 元 素 右 边框 之 间 的 宽度 
padding-top 设置 元 素 内 容 到 元 素 上 边框 之 间 的 宽度 


page-break-after 


设置 当 网 页 打印 的 时 候 在 元 素 之 后 分 页 


page-break-before 


设置 当 网 页 打印 的 时 候 在 元 素 之 前 分 页 
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描述 
设置 当 网 页 打印 的 时 候 在 元 素 之 中 分 页 


简写 属性 ， 在 一 个 声明 中 设置 pause-before 和 pause-after 


pause 
pause-after 设置 在 读 完 一 个 元 素 的 内 容 之 后 的 暂停 


pause-before 


设置 在 读 完 一 个 元 素 的 内 容 之 前 的 暂停 


pitch 设置 语音 的 一 般 定 调 ( 频 率 ) 

pitch-range 设置 在 一 般 的 定 调 里 面 如 何 变 调 

play-during 设置 当 一 个 元 素 的 内 容 被 读 出 来 的 时 候 ， 一 个 声音 是 否 作为 背景 音乐 播放 
position 设置 元 素 在 网 页 中 以 何 种 方式 定位 

quotes 为 每 个 等 级 的 引用 设置 成 对 的 引用 记号 

Tichness 设置 声音 的 饱和 度 和 亮度 

Tight 与 position 属性 联 用 ， 定 位 元 素 位 置 

speak 用 来 开启 或 关闭 文本 语音 处 理 

speak-header 设置 是 否 要 在 每 个 单元 格 前 读 表格 标题 


speak-numeral 
speak-punctuation 
speech-rate 
Stress 
table-layout 
text-align 
text-decoration 
text-indent 
text-transform 
top 
unicode-bidi 
vertical-align 
visibility 


控制 如 何 读数 字 

设置 如 何 读 标点 

设置 语 速 

控制 因为 重音 标记 而 变形 的 数量 

设置 怎样 的 表格 列 宽 度 是 适合 的 

为 块 状元 素 设 置 内 容 〈 文 本 和 图 片 ) 的 对 齐 方式 
设置 文本 修饰 

设置 文本 首 行 缩 进 

控制 文本 的 大 写 效果 

与 position 属性 联 用 ， 定 位 元 素 位 置 

设置 如 何 显示 双向 文本 《两 种 读 方式 都 可 以 的 文本 ) 
设置 内 联 元 素 和 表格 单元 格 中 的 内 容 短 直 定位 


设置 元 素 是 否 可 见 


Voice-family 


音 谱 名 的 优先 清单 


Volume 
White-space 
Widows 
width 


设置 音量 


设置 元 素 怎么 处 理 空白 〈 空 格 、 制 表 符 和 强制 换行 ) 
设置 打印 网 页 时 一 个 段落 必须 至 少 在 页 眉 留 下 多 少 行 
设置 元 素 的 宽度 


Word-spacing 


设置 在 单词 之 前 的 距离 


Z-index 


设置 当 几 个 元 素 必须 显示 在 同一 个 区 域 时 它们 的 层 用 顺序 


CSS3 按 模块 发 布 ， 包 括 用 户 界面 (User Interface)、 多 列 (Multi-column )、 可 伸缩 盒 
(Flexible Box)、 变 换 (Transform)、 过 渡 (Transition) 和 动画 (Animation) 等 ， 正 不 断 推 
出 各 个 模块 的 草案 版 ， 现 正在 持续 更 新 中 ， 已 经 有 100 多 个 属性 了 。 用 户 可 以 在 W3C 
(https://www.w3.org/TR/) 的 所 有 标准 和 草稿 页 查询 CSS3 的 最 新 模块 。 
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8.5.2 CSS 属性 值 和 单位 


@@ 字符 
如 果 值 为 若干 单词 ， 则 要 给 值 加 引号 。 例 如 : 


p{font-family:"sans serif";} 


四 颜色 
颜色 的 表示 见 表 8.4。 
表 8.4 CSS 颜色 属性 值 
单 位 描 述 
( 闫 色 名 ) | 颜色 名 称 
rgb(x,x,x) | RGB 值 
rgb(x%, x%, x%) | RGB 百分比 值 
#rrggbb 十 六 进 制 数 


例如 红色 除了 英文 单词 “red” 以 外 ， 还 可 以 使 用 十 六 进 制 的 颜色 值 “ 狂 F0000” 表 示 : 
p{color:#FF0000;} 

当然 ， 也 可 以 使 用 缩写 形式 : 

p{color:#F00;} 


用 户 可 以 通过 两 种 方法 使 用 RGB 值 ， 例 如 rgb(255,0,0) 和 rgb(100%,0%,0%)。 在 使 用 
RGB 百分比 时 ， 即 使 值 为 0 也 要 写 百分比 符号 。 

© 长 度 

长 度 属性 值 见 表 8.5。 


表 8.5 CSS 长 度 属性 值 
简介 

相对 单位 ， 相 对 于 父 元 素 字 体 大 小 的 倍数 
相对 单位 ， 相 对 于 字符 “x” 的 高 度 ， 通 常 为 字体 高 度 的 一 半 
相对 单位 ， 像 素 (Pixel) 
绝对 单位 ， 点 (Point) 
绝对 单位 ， 派 卡 〈Pica)， 相 当 于 我 国 新 四 号 铅字 的 尺寸 
绝对 单位 ， 英 寸 (Inch) 
绝对 单位 ， 厘 米 (Centimeter) 
绝对 单位 ， 毫 米 (Millimeter) 


绝对 单位 换算 : lin = 2.54cm=25.4mm = 72pt= 6pc 

绝对 单位 在 网 页 中 很 少 使 用 ， 一 般 多 用 在 传统 平面 印刷 中 

相对 单位 与 绝对 单位 相 比 显示 大 小 不 是 固定 的 ， 受 到 屏幕 分 辩 率 、 可 视 区 域 、 浏 览 器 
设置 以 及 相关 元 素 大 小 等 多 种 因素 影响 。 

1) em 


em 相对 于 父 元 素 ， 是 父 元 素 字体 大 小 的 倍数 。 
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2》 ex 
ex 是 相对 于 字符 “x” 的 高 度 ， 通 常 为 字体 尺寸 的 一 半 。 在 实际 使 用 中 ， 浏 览 器 将 通 


过 em 的 值 除 以 2 得 到 ex 值 。 

3) px 

像素 (Pixel) 是 相对 于 显示 器 的 屏幕 分 辨 率 而 言 的 , 例如 Windows 用 户 所 使 用 的 分 辩 
率 一 般 是 96 像素 /英寸 ，MAC 用 户 所 使 用 的 分 辨 率 一 般 是 72 像素 /英寸 。 


8.5.3 CSS3 属性 值 和 单位 


@ 颜色 
CSS3 增加 的 颜色 值 和 相应 单位 见 表 8.6。 
表 8.6 CSS3 增加 的 颜色 值 和 相应 单位 
方法 描述 
currentColor currentColor 关键 字 的 值 是 color 属性 值 
r: 红色 值 ，g: 绿色 值 ，b: 蓝 色 值 ， 取 值 为 正 整数 或 百分数 
a: Alpha 透明 度 ， 取 值 为 0 一 1 
h: Hue (色调 )，0° 或 360° 表 示 红 色 ，60° 表 示 黄 色 ，120° 表 示 绿 色 ，180° 度 表示 
青色 ，240° 表 示 蓝 色 ，300° 表 示 洋 红 ， 用 户 也 可 取 其 他 数值 来 指定 颜色 ， 范 围 为 
hsl(h,s,l) 0°~360° 
s: Saturation (饱和 度 )， 取 值 为 0 一 100.0% 
1: Lightness (亮度 )， 取 值 为 0 一 100.0% 
h: Hue (色调 )，0° 或 360° I 色 ，60° 表 示 黄 色 ，120° 表 示 绿 色 ，180° 表 示 青 
色 , 240° 表 示 蓝 色 , 300° 表 示 洋 红 , 用 户 也 可 取 其 他 数值 来 指定 颜色 , 范围 为 0" 一 
360° 
s: Saturation (饱和 度 )， 取 值 为 0 一 100.0% 
1: Lightness 〈 亮 度 )， 取 值 为 0 一 100.0% 
a: Alpha (透明 度 )， 取 值 为 0 一 1 


HSL 是 工业 界 的 一 种 色彩 标准 ， 因 为 它 能 涵盖 到 人 类 视觉 所 能 感知 的 所 有 颜色 ， 所 以 
在 工业 界 被 广泛 应 用 。 在 定义 了 一 种 HSL 颜色 之 后 ， 很 容易 派生 出 多 个 相近 的 颜色 ， 只 要 
修改 饱和 度 和 亮度 的 百分比 就 可 以 了 。 

HSL 和 了 RGB 与 用 十 六 进 制 数值 表示 颜色 的 区 别 在 于 它们 支持 透明 通道 。 

@ 长度 

CSS3 增加 的 长 度 值 和 相应 单位 见 表 8.7。 


表 8.7 CSS3 增加 的 长 度 值 和 相应 单位 


rgba(r,g,b,a) 


hsla(h,s,l,a) 


单 位 简介 

ch | 相对 单位 ， 相 对 于 数字 “0” 的 宽度 

本 相对 单位 ， 相 对 于 根 元 素 html) 字体 大 小 的 倍数 。 车 当前 文档 根 元 素 文本 的 字体 尺寸 
未 被 设置 ， 则 相对 于 浏览 器 的 默认 字体 尺寸 ， 一 般 为 16px 


视 口 被 均 分 为 100 单位 的 vw 
视 口 被 均 分 为 100 单位 的 四 


相对 单位 ， 
相对 单位 ， 


相对 于 视 口 的 宽度 。 
相对 于 视 口 的 高 度 。 
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相对 单位 
的 vmin 
相对 单位 ， 相 对 于 视 口 的 宽度 或 高 度 中 较 大 的 那个 。 其 中 最 大 的 那个 被 均 分 为 100 单位 


的 vmax 


， 相 对 于 视 口 的 宽度 或 高 度 中 较 小 的 那个 。 其 中 最 小 的 那个 被 均 分 为 100 和 


Vmax 


在 实际 应 用 中 ， 建 议 用 户 多 使 用 相对 长 度 单位 rem 和 px。 
贺 83 Css3(rem).html， 说 明了 rem 和 em 单位 的 使 用 ， 如 图 8.7 所 示 。 


rem 相 对 于 根 元 素 字体 大 小 的 倍数 
rem 相 对 于 根 元 素 字体 大 小 的 倍数 


en 由 于 恨 元 素 字体 大 小 的 信教 
on 相 对 于 父 元 素 字 伟大 小 的 信 落 


em 相对 于 父 元 素 字体 大 小 的 倍数 


em 相对 于 父 元 素 字 
体 大 小 的 倍数 


图 8.7 css3(rem).html 示意 图 


源 代码 如 下 : 
<head> 
<title>rem 和 em</title> 
<style> 
/* 设 根 元 素 字体 大 小 为 10px*/ 
html {font-size: 1l0px; } 
/* 最 外 层 元 素 字 体 大 小 为 30px*/ 
.rem-outside {font-size: 3rem;} 
/* 中 间 层 元 素 字 体 大 小 为 20px*/ 
.rem-middle {font-size: 2rem;} 
/* 最 里 层 元 素 字 体 大 小 为 10px*/ 
.rem-inside {font-size: lrem;} 
/* 最 外 层 元 素 字 体 大 小 为 10px， 因 为 其 父 元 素 〈 即 根 元 素 ) 字体 大 小 为 10px*/ 
.em-outside {font-size: lem;} 
/* 中 间 层 元 素 字体 大 小 为 20px， 因 为 其 父 元 素 ( .em-outside) 字体 大 小 为 10px*/ 
.em-middle {font-size: 2em;} 
/* 最 里 层 元 素 字 体 大 小 为 60px， 因 为 其 父 元 素 〈 .em-miqdle) 字体 大 小 为 20px*/ 
.em-inside {font-size: 3em;} 
</style> 
</head> 
<body> 


<div class="rem-outside"> 


121 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 
<p>rem 相对 于 根 元 素 字 体 大 小 的 倍数 </p> 


<div class="rem-middle"> 
<p>rem 相对 于 根 元 素 字体 大 小 的 倍数 </P> 
<div class="rem-inside"> 
<p>rem 相对 于 根 元 素 字体 大 小 的 倍数 </P> 
</div> 
</div> 
</div> 
<div class="em-outside"> 
<p>em 相对 于 父 元 素 字 体 大 小 的 倍数 </p> 
<div class="em-middle"> 
<p>em 相对 于 父 元 素 字 体 大 小 的 倍数 </p> 
<div class="em-inside"> 
<p>em 相对 于 父 元 素 字 体 大 小 的 倍数 </p> 
</div> 
</div> 
</div> 
</body> 


© 时 间 
CSS3 时 间 值 和 相应 单位 见 表 8.8。 
表 8.8 CSS 时 间 值 和 相应 单位 
简 介 
秒 
毫秒 


@ 角度 
CSS3 角度 值 和 相应 单位 见 表 8.9。 


表 8.9 CSS 角度 值 和 相应 单位 


单 位 简 介 
deg | 度 (Degrees) 
grad 梯度 〈Gradians) ， 一 个 圆 共 400 梯度 
rad 弧度 (Radians) 
tum 转 、 圈 (Tums) 


角度 单位 换算 : 90deg=100grad=0.25turm ~: 
1.570796326794897rad 
[ 男 ]s4 CSS3(Values and Units) html， 说 明了 


常用 单位 的 使 用 ， 如 图 8.8 所 示 。 


源 代码 如 下 : 视频 讲解 
<head> 

<title>css3 属性 值 和 单位 </title> 

<style> 


div{wigth: 130px;height: 40px;borgder: 图 8.8 CSS3(Values and Units).html 示意 图 
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lpx solid;margin-top: 10px;} 
/* 设 置 #9iv1 元 素 的 前 景色 为 蓝 色 , 指 文字 和 边框 ; 背景 色 为 黑色 ,Alpha 透明 度 为 0.2*/ 
#divl{color: #0000FF;background-color: rgba(0,0,0,0.2);} 
/* 设 置 #div2 元 素 的 背景 色 为 绿色 、 饱 和 度 为 50$、 亮 度 为 50%$、Alpha 透明 度 为 0.5*/ 
#div2{background-color: hsla(120,50%;50%,0.5);?} 
/* 设 置 #div3 元 素 的 宽度 为 10ch， 相 当 于 10 个 “0” 的 宽度 */ 
#div3{width: l0ch;overflow: hidden;} 
/* 设 置 #div4 元 素 旋转 30°*/ 
#div4af{ 
-webkit-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
transform: rotate(30deg); 
background-color: #BBBBBB; 


} 
/* 设 置 当 和 鼠标 指针 悬 停 在 #pl 元 素 上 时 ， 在 1 秒 内 宽度 由 100px 逐渐 变 小 为 10px*/ 
#p1{ 
position:absolute;overflow:hidden;width: 100px;border: lpx solid; 
-webkit-transition-property:width7 
-0o-transition-property:width; 
transition-property:width; 
-webkit-transition-duration:1s; 
-o-transition-duration:1s; 
transition-duration:1s; 
-webkit-transition-timing-function:ease-in7 
-o-transition-timing-function:ease-in7 
transition-timing-function:ease-in; 
} 
#pl:hover{width:10px;} 
</style> 
</head> 
<body> 
<div id="divl">CSSs3 颜色 值 和 单位 </div> 
<div idq="div2">CSS3 颜色 值 和 单位 </div> 
<div id="div3">0000000000AA</div> 
<div iq="div4">cCSS3 角度 值 和 单位 </div> 
<p id="pl">CSS3 时 间 值 和 单位 ，1s 内 宽度 变 小 </p> 
</body> 


样式 代码 中 的 -webkit- 是 浏览 器 私有 前 级 ， 在 CSS3 模块 标准 尚未 被 W3C 批准 或 者 标 
准 所 提议 的 特性 尚未 被 浏览 器 完全 实现 时 ， 为 避免 日 后 W3C 公布 标准 时 有 所 变更 ， 加 入 
一 个 私有 前 级 ， 通 过 这 种 方式 来 提前 支持 CSS3 模块 的 新 属性 ， 当 模块 标准 发 布 以 后 就 不 
再 使 用 。 其 中 ，-moz- 代 表 Firefox，-ms- 代 表 正 ，-webkit- 代 表 Safari、Chrome，-o- 代 表 
Opera。 


提示 : 用 户 在 练习 书 上 的 例子 时 ， 在 大 多 数 情况 下 可 以 先 忽略 带 有 浏览 器 私有 前 缓 的 
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样式 。 
在 书写 样式 时 应 使 用 工具 而 不 是 手动 去 添加 相关 的 浏览 器 私有 前 级 ， 这 样 可 以 确保 浏 


览 器 的 兼容 性 , 也 防止 添加 已 经 不 再 使 用 的 前 级 , 建议 使 用 Autoprefixer (https://github.com/ 
postcss/autoprefixer) 工具 ， 或 者 使 用 Autoprefixer CSS 在 线 工 具 (https://autoprefixer.github.io/) 
自动 生成 。 
@ 渐变 图 像 
目前 ， 几 乎 所 有 的 浏览 器 都 开始 支持 gradient，gradient 允许 使 用 简单 的 方法 实现 颜色 
渐变 图 像 ， 可 以 用 在 所 有 接受 图 像 的 属性 上 。CSS3 颜色 渐变 方法 见 表 8.10。 
表 8.10 ”CSS3 颜色 渐变 


描述 


线性 渐变 

下 述 值 表示 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 
<angle> 为 用 角度 值 指定 渐变 的 方向 

to left， 设 置 渐变 为 从 右 到 左 ， 相 当 于 270° 

to right: 设置 渐变 从 左 到 右 ， 相 当 于 90° 

to top: 设置 渐变 从 下 到 上 ， 相 当 于 0° 

to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180"， 为 默认 值 
<color-stop> 用 于 指定 渐变 的 起 止 颜色 

<color>: 指定 颜色 

<length>: 用 长 度 值 指定 起 止 颜色 位 置 ， 不 允许 负 值 
<percentage>: 用 百分比 指定 起 止 颜色 位 置 

重复 的 线性 渐变 ， 其 语法 与 linear-gradient0 的 语法 相同 

径 向 渐变 

<shape> 人 确定 圆 的 类 型 

circle: 指定 圆 形 的 径 向 渐变 

ellipse: 指定 椭圆 形 的 径 向 渐变 
<size>=<extent-keyword>|[<circle-size>||<ellipse-size>] 
<extent-keyword> 指 circle 和 ellipse 都 接受 该 值 作为 size 
closest-side: 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 边 
closest-corner: 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 


linear-gradient([[ <angle> | to <side-or- 
comer> ],]? <color-stop>[,<color-stop>]+) 


repeating-linear-gradient() 


近 的 角 
farthest-side: 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 
。 远 的 边 
radial gradient([[ “shape> | <size> ] [at | farthesteomer， 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 
position> ]? ,| at <position>,]?<color- 最 远 的 角 


<circle size> 仅 指 circle 接受 该 值 作为 size 

<length>: 用 长 度 值 指定 正 圆 径 向 渐变 的 半径 长 度 ， 不 允许 为 
负 值 

<ellipse-size> 仅 指 ellipse 接受 该 值 作为 size 

<length>: 用 长 度 值 指定 椭圆 径 向 渐变 的 横向 或 纵向 半径 长 
度 ， 不 允许 为 负 值 

<percentage>: 用 百分比 指定 椭圆 径 向 渐变 的 横向 或 纵向 半径 
长 度 ， 不 允许 为 负 值 

<position> 确 定 圆心 的 位 置 。 如 果 提供 两 个 参数 ， 第 1 个 表示 
横 坐 标 ， 第 2 个 表示 纵 坐 标 ; 如 果 只 提供 一 个 ， 第 2 个 值 默 
认为 50%， 即 center 
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续 表 

描 述 
<percentage>Q@): 用 百分比 指定 径 向 渐变 圆心 的 横 坐 标 值 ， 可 
以 为 负 值 
<length>@D: 用 长 度 值 指定 径 向 渐变 圆心 的 横 坐 标 值 ， 可 以 为 
负 值 
left， 设 置 左边 为 径 向 渐变 圆心 的 横 坐 标 值 
centerQ): 设置 中 间 为 径 向 渐变 圆心 的 横 坐 标 值 
Tight: 设置 右边 为 径 向 渐变 圆心 的 横 坐标 值 
<percentage>G@): 用 百分比 指定 径 向 渐变 圆心 的 纵 坐 标 值 ， 可 
以 为 负 值 
<length>@: 用 长 度 值 指定 径 向 渐变 圆心 的 纵 坐 标 值 ， 可 以 为 
负 值 
top: 设置 顶部 为 径 向 渐变 圆心 的 纵 坐 标 值 
centerB): 设置 中 间 为 径 向 渐变 圆心 的 纵 坐 标 值 
bottom: 设置 底部 为 径 向 渐变 圆心 的 纵 坐 标 值 
<color-stop> 用 于 指定 渐变 的 起 止 颜色 
<color>: 指定 颜色 
<length>: 用 长 度 值 指定 起 止 颜色 位 置 ， 不 允许 为 负 值 
<percentage>: 用 百分比 指定 起 止 颜色 位 置 ， 不 允许 为 负 值 
重复 的 径 向 渐变 ， 其 语法 与 radial-gradient0 的 语法 相同 


Tadial-gradient([[ <shape> || <size> ] [ at 
<position> ]? ,| at <position>,]?<color- 
stop>[ ,<color-stop>]+) 


Tepeating-radial-gradient() 


在 CSS3 属性 的 语法 描述 中 可 能 使 用 一 些 修饰 符 ， 含 义 如 下 : 
(1) * 代 表 出 现 0 次 或 以 上 ; + 代表 出 现 1 次 或 以 上 ; ?代表 是 可 选 的 ， 即 出 现 0 次 或 


(2) {A} 代 表 出 现 A 次 {A,B} 代表 出 现 A 
次 以 上 、B 次 以 下 ， 其 中 B 可 以 省 略为 {A,}， 代 
表 至 少 出 现 A 次 ， 无 上 限 。 

(3) # 代 表 出 现 1 次 以 上 ， 以 逗号 隔 开 ， 可 以 
使 用 后 面 跟 大 括号 的 形式 , 精确 表示 重复 多 少 次 ， 
例如 <length>#{1,4}。 

(4) ! 代 表 至 少 产生 一 个 值 ， 即 使 组 内 的 值 都 


可 以 省 略 , 至 少 有 一 个 值 不 能 被 省 略 , 例如 [A? B? 
C?]!。 

(5)“A? B? C?” 和 “A? || B? | C?” 表 示 0 
个 或 更 多 。 

(6)“[ A? B? C? ]!” 和 “AlB IC” 表 示 1 
个 或 更 多 。 


《全 | 人 家 AB = 列表 项 标记 使 用 颜色 绪 性 渐变 图 像 
C” 和 “A&&B && C” 表 示 所 有 。 5: 列表 项 标记 舍 用 据 色 线性 湖人 图 信 


3 = 列表 项 标 i 线性 渐 朗 
圆 ss csss(eradicnd hl 说 车 列表 项 标记 使 用 问 色 线性 淅 朗 图 从 


二 i 二 本 之 中 
明了 颜色 渐变 图 像 的 应 用 ， 如 图 89 加 
所 示 。 视频 讲解 


色 圆 形 径 向 渐变 图 像 


图 8.9 ”CSS3(gradient).html 示意 图 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 
源 代码 如 下 : 


<head> 
<title> 颜 色 渐变 图 像 </title> 
<style> 

div { 
width: 300px; 
height: 200px; 
border: lpx solid #000000; 
margin-bottom: 10px;; 

} 

/* 为 #div1 元 素 添加 圆 形 径 向 渐变 图 像 ， 半 径 长 度 为 100px， 渐 变 颜 色 为 红 一 黄 */ 

#divl { 
background: -webkit-radial-gradient (100px, #F00, #FFO0); 
background: -o-radial-gradient (100px, #F00, #FFO0); 
background: radial-gradient (100px, #F00, #FFO0); 

} 

/* 为 #div2 元 素 添加 从 上 到 下 的 线性 渐变 图 像 ， 渐 变 颜 色 为 红 一 黄 一 红 */ 

#div2 { 
background: -webkit-gradient (linear, left top, left bottom, 
from(#F00), color-stop(#FF0), to(#F00)); 
background: -webkit-linear-gradient (#F00, #FFO, #F00); 
background: -o-linear-gradient (#F00, #FFO, #F00); 
background: linear-gradient (#F00, #FFO, #F00); 


} 
/* 为 ol 列表 项 标记 添加 从 上 到 下 的 线性 渐变 图 像 ， 渐 变 颜色 为 红 一 黄 一 红 */ 
GT 
list-style-image: -webkit-gradient (linear, left top, left bottom, 
from(#F00), color-stop(#FF0), to(#F00)); 
list-style-image: -webkit-linear-gradient (#F00, #FFO, #F00); 
list-style-image: linear-gradient (#F00, #FFO, #F00); 
. 
</style> 
</head> 
<body> 
<div id="divl"> 颜 色 圆 形 径 向 渐变 图 像 </div> 
<div id="div2"> 颜 色 线性 渐变 图 像 </div> 
<ol> 
<1i> 列 表 项 标记 使 用 颜色 线性 渐变 图 像 </1i> 
<1i> 列 表 项 标记 使 用 颜色 线性 渐变 图 像 </1i> 
<1i> 列 表 项 标记 使 用 颜色 线性 渐变 图 像 </1i> 
ol 
</body> 


手动 制作 颜色 渐变 效果 比较 难 ， 用 户 可 以 使 用 网 上 的 渐变 效果 生成 器 制作 完美 的 渐变 
效果 。 例 如 “http:/www.colorzilla.comygradient-editor/”， 使 用 图 形 化 界面 编辑 器 来 选择 颜 
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色 、 色 标 位 置 、 渐 变形 式 〈 线 性 或 者 径 向 )， 包 括 最 后 生成 颜色 值 的 表示 方法 。 


8.6 使 用 CSS 


使 用 CSS 有 以 下 几 种 方法 。 

@ 内 部 样式 表 

当 单 个 页 面 需要 应 用 样式 时 ， 最 好 使 用 内 部 样式 表 ， 可 以 用 <style> 标 签 在 文档 头 部 定 
义 内 部 样式 表 ，<style> 标 签 用 于 为 HTML 文档 定义 样式 信息 。 

在 HIMLS 之 前 的 版 本 中 , <style> 标 签 的 type 属性 是 必需 的 , 用 于 定义 style 元 素 的 内 
容 类 型 ， 唯 一 的 值 是 “textcss”， 但 在 HTML5 中 不 再 是 必需 的 ， 可 以 省 略 type 属性 。 
例如 : 

<head> 

<style> 

hl{color:#F00;} 

p{margin-left:20px;} 

</style> 

</head> 


<style> 标 签 的 media 属性 用 于 为 不 同 的 媒介 类 型 规定 不 同 的 样式 。 表 8.11 列 出 了 所 有 
的 媒介 类 型 。 


表 8.11 <style> 标 签 的 media 属性 


属 性 值 描 述 
screen 计算 机 屏幕 (默认 值 》 
tty 电 传 打字 机 以 及 使 用 等 宽 字符 网 格 的 类 似 媒介 
tv 电视 类 型 设备 〈 低 分 辨 率 、 有 限 的 屏幕 翻滚 能 力 ) 
projection 放映 机 

media handheld 手持 设备 〈 小 屏幕 、 有 限 的 带宽 ) 

print 打印 预览 模式 /打印 页 
braille 盲人 用 点 字 法 反馈 设备 
aural 语音 合成 器 
all 适合 所 有 设备 


若 在 一 个 style 元 素 中 定义 一 个 以 上 的 媒介 类 型 ， 使 用 逗号 分 阳 。 例 如 : 

<style media="screen,projection"> 

贺 8.6 CSS(style-media).html， 实现 了 针对 两 种 不 同 媒介 类 型 的 不 同样 式 (计算 机 屏 
幕 和 打印 )。 

源 代码 如 下 : 


<head> 
<title>style 媒介 类 型 </title> 
<! 一 -为 屏幕 声明 样式 --> 
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命令 ， 


在 样 
式 表 


式 表 


出 现 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


<style> 
hl {color: #FF0000;} 
p {color: #0000FF;} 
body {background-color: #FFEFD6;} 
</style> 
<!-- 为 打印 机 声明 样式 --> 
<style media="print"> 
hl {color: #000000;} 
p {color: #000000;} 
body {background-color: #FFFFFF;} 
</style> 
</head> 
<body> 
<h1> 标 题 </h1> 
<p> 一 个 段落 </p> 
</body> 


在 浏览 器 中 默认 显示 的 是 计算 机 屏幕 样式 ,如 图 8.10 所 示 。 选择 【文件 区 打 印 预览 】 
预览 打印 样式 ， 效 果 如 图 8.11 所 示 。 


3) style-nedia - Wozill... (- |O] 区 | ) style-nedia - Norill... [|] 区 |] 


文件 中 ”编辑 中 ”查看 由 历史 (8) 书签 @ 页 面 设置 由 … ] 第 &) 1 本 
~ 


回 :trle-nedia 


€, 中 || 画 | 四 ~- G|| 晤 - :月 style-media 


加 森 用 - 星 Cookies- 无 css 错误 - 国 表单 


标题 1 标题 1 


一 个 县 区 一 个 段落 


图 8.10 ”CSS(style-media).html 屏幕 样式 图 8.11 CSS(style-media).html 打印 样式 


四 外 部 样式 表 

当 多 个 页 面 需要 应 用 相同 样式 时 ， 应 该 使 用 外 部 样式 表 。 外 部 样式 表 把 声明 的 样式 放 
式 文件 中 ， 当 页 面 需要 使 用 样式 时 通过 <link> 标 签 链 接 外 部 样式 表 文件 。 使 用 外 部 样 
， 通 过 改变 一 个 文件 就 能 改变 整个 站 点 的 外 观 。 

1) 样式 表 文 件 

样式 表 文 件 可 以 用 任何 文本 编辑 器 进行 编辑 ， 在 文件 中 不 能 包含 任何 HTML 标签 , 样 
文件 以 .css 为 扩展 名 。 

在 WebStorm 中 建立 样式 表 文 件 css/css.css 的 主要 操作 步骤 如 下 : 

启动 WebStorm， 选 择 【 文 件 】| 【新建 】 命 令 ， 打开 【 新 建 】 列 表 框 ， 选 中 【目录 】 
【新 建 目 录 】 对 话 框 ， 在 【输入 新 目录 名 称 】 文 本 框 中 输入 “css”， 然 后 单 击 【确定 】 
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按钮 。 

在 左边 的 【项 目 】 窗 口中 选中 css 目录 ， 接 着 选择 【文件 】|【 新 建 】 命 令 ， 打 开 【 新 
建 】 列 表 框 ， 选 中 Stylesheet， 出 现 New Stylesheet 对 话 框 ， 在 Name 文本 框 中 输入 “css”， 
然后 单 击 【确定 】 按 钮 。 在 编辑 区 中 输入 下 面 的 样式 声明 : 

hrfborder: solid lpx #FF0000;} 

p{margin-left:20px;} 


body{background-image:url(../images/bg.gif);} 
提示 : 不 要 在 属性 值 和 单位 之 间 留 有 空格 ， 例 如 “20 px” 是 错误 的 ， 应 为 “20px”。 
2) <link> 标 签 
<link> 标 签 定义 文档 与 外 部 资源 的 关系 ，<link> 标 签 最 常见 的 用 途 是 链接 样式 表 。 
<link> 标 签 的 可 选 属性 见 表 8.12， 表 8.13 列 出 了 <link> 标 签 的 rel 属性 值 。 
表 8.12 <link> 标 签 的 可 选 属 性 
| wm | 


见 表 8.13 


被 链接 文档 的 MIME 类 型 
被 链接 文档 的 位 置 
当前 文档 与 被 链接 文档 之 间 的 关系 


表 8.13 <link> 标 签 的 rel 属性 值 


值 描 述 
alternate 文档 的 替代 版 本 〈 例 如 打印 页 、 翻 译 或 镜像 ) 
stylesheet 外 部 样式 表 
start 集合 中 的 第 1 个 文档 
next 集合 中 的 下 一 个 文档 
prev 集合 中 的 上 一 个 文档 
contents 
index 引 
glossary 在 文档 中 使 用 的 词汇 的 术语 表 〈 解 释 ) 
copyright 包含 版 权 信息 的 文档 
chapter 文档 的 章 
Section 文档 的 节 
subsection 文档 的 小 节 
appendix 文档 附录 
help 帮助 文档 
bookmark 相关 文档 


link 元 素 是 空 元 素 ， 只 能 用 在 head 中 。 
[而 ]s.7 CSS(css).html， 使 用 了 外 部 样式 表 文 件 css/css.css， 如 图 8.12 所 示 。 


外 部 样式 表 可 以 在 任何 文本 编辑 器 中 进行 篇 辑 。 


图 8.12 CSS(ess).html 示意 图 


源 代码 如 下 : 


129 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 〈 第 2 版) 


<head> 

<title> 外 部 样式 表 </title> 

<link rel="stylesheet" href="css/css.css" /> 
</head> 

<body> 

<hr size="2" /> 

<p> 外 部 样式 表 可 以 在 任何 文本 编辑 器 中 进行 编辑 。</P> 
</body> 


@ 内 联 样式 

内 联 样式 由 于 将 表现 和 内 容 混在 一 起 ， 不 符合 Web 标准 ， 所 以 用 户 要 慎 用 这 种 方法 ， 
当 样 式 仅 需 要 在 一 个 元 素 上 应 用 一 次 时 可 以 使 用 内 联 样式 。 

使 用 内 联 样式 就 是 在 元 素 标签 内 使 用 style 属性 ，style 属性 值 可 以 包含 任何 CSS 样式 
声明 。 例 如 改变 段落 的 左 外 边 距 : 


<p style="margin-left:20px"> 这 是 一 个 段落 </p> 


8.7 ”媒体 查询 


大 家 知道 可 以 在 <style> 标 签 或 <link> 标 签 的 media 属性 中 指定 设备 类 型 (screen 或 
print)， 为 不 同 设备 应 用 不 同 的 样式 表 。 媒 体 查询 更 进一步 ， 不 仅 可 以 指定 设备 类 型 ， 还 能 
指定 设备 的 能 力 和 特性 。 例 如 : 


<style media="screen and (orientation:portrait)"></style> 


媒体 查询 表达 式 首先 询问 设备 的 类 型 〈 是 屏幕 吗 ? )， 然 后 询问 特性 〈 屏 幕 方向 是 垂 
直 的 吗 ?)， 样 式 应 用 给 任何 有 屏幕 并 且 屏 幕 方向 是 垂直 的 设备 。 

CSS3 媒体 查询 可 以 针对 特定 的 设备 能 力 或 条 件 为 网 页 应 用 特定 的 CSS 样式 。W3C 将 
媒体 查询 定义 为 “媒体 查询 包含 媒体 类 型 和 零 个 或 多 个 检测 媒体 特性 的 表达 式 。width、 
height 和 color 等 都 是 可 用 于 媒体 查询 的 特性 。 使 用 媒体 查询 ， 可 以 不 必修 改 内 容 本 身 ， 而 
让 网 页 适 配 不 同 的 设备 。” 对 于 CSS3 媒体 查询 模块 的 规范 ， 读 者 可 参考 W3C 网 站 
(https:Wwww.wW3.org/TR/css3-mediaqueries/ ) 。 

@ 媒体 查询 的 语法 

媒体 查询 的 语法 如 下 : 


[only | not]? <media type> [and <expression>]* | <expression> [and <expression>]* 


其 中 ，media_type 表示 媒体 查询 的 设备 类 型 ， 可 参考 表 8.11。 在 针对 所 有 设备 的 媒体 查询 
中 可 以 使 用 简写 语法 ， 即 省 略 media_type， 如 果 不 指定 media_type， 则 表示 all。 
expression 表示 媒体 查询 特性 条 件 ，CSS3 媒体 查询 规定 的 所 有 可 用 特性 如 下 。 
。 width: 视 口 的 宽度 。 
。 height: 视 口 的 高 度 。 
。 device-width: 演 染 表面 的 宽度 〈 可 以 认为 是 设备 屏幕 的 宽度 )。 
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device-height: 泻 染 表面 的 高 度 〈 可 以 认为 是 设备 屏幕 的 高 度 )。 
orientation: 设备 方向 是 水 平 还 是 垂直 。portrait 表示 垂直 ，landscape 表示 水 平 。 
aspect-ratio: 视 口 的 宽 高 比 。16:9 的 宽屏 显示 器 可 以 写成 aspect-ratio:16/9。 
color: 颜色 的 色 位 深度 。 比 如 min-color:16 表示 设备 至 少 支 持 16 位 。 
colorindex: 设备 颜色 查找 表 中 的 条 目 数 ， 注 意 值 必须 是 数值 ， 不 能 为 负 。 
monochrome: 在 单 色 帧 缓冲 中 表示 每 个 像素 的 位 数 ， 注 意 值 必须 是 数值 (整数 )， 
比如 monochrome:2， 不 能 为 负 。 
resolution: 屏幕 或 打印 分 辨 率 ， 比 如 min-resolution:300dpi。 当 然 也 可 以 接受 每 厘米 
多 少 点 ， 比 如 min-resolution:118dpcm。 
scan: 针对 电视 的 逐 行 扫描 (progressive) 和 隔行 扫描 (interlace)。 例如 720p HDTV 
(720p 中 的 p 表示 progressive， 即 逐 行 ) 可 以 使 用 scan:progressive 来 判断 ;而 1080i 
HDTV (1080i 中 的 i 表示 interlace， 即 隔行 ) 可 以 使 用 scan:interlace 来 判断 
grid: 设备 基于 栅 格 还 是 位 图 。 

上 面 列 出 的 特性 ， 除 scan 和 grid 外 ， 都 可 以 加 上 min 或 max 前 级 以 指定 范围 。 

提示 : 色 位 深度 是 指 在 某 个 分 辩 率 下 每 一 个 像素 点 可 以 有 多 少 位 二 进 制 数 来 描述 色 
彩 ， 单 位 是 bit( 位 ), 典型 的 色 深 有 8bit、16bit、 24bit 


和 32bit。 深 度数 值 越 高 ， 色 彩 越 多 。 za x 280 
@ 在 CSS 中 使 用 媒体 查询 Se : 
在 CSS 中 使 用 媒体 查询 要 用 @media 声明 一 个 

媒体 查询 ， 然 后 把 CSS 声明 写 在 一 对 大 括号 中 。 

例如 : ER 


2 有 远 径 设备 : Key 


@media screen and (max-device-width: 
1920px) { 
pi 


color:#FF0000; 


l 550| x 280 
以 上 代码 会 在 屏幕 设备 的 宽度 ” 国 吕 3 国 
为 1920 像素 及 以 下 时 把 所 有 了 元 素 a 
变 成 红色 。 Ee: 768 x 280 
在 正常 情况 下 ,任何 CSS 样式 加 
都 可 以 放 在 媒体 查询 里 。 视频 讲解 


[ 吏 8.8 ”CSS3(media)html， 在 其 样式 文件 EE 
css3(media).css 中 使 用 了 媒体 查询 , 整个 页 面 的 背景 颜 
色 会 随 着 当前 视 口 大 小 的 变化 而 变化 ,如 图 8.13 所 示 。 

CSS3(media).html 的 源 代码 如 下 : 


<title> 媒 体 查 询 </title> 
<link rel="stylesheet" href="css/css3 图 8.13 ”CSS3(media).html 示意 图 
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(media) .css"> 
</head> 
<body> 
</body> 


css3(media).css 的 源 代码 如 下 : 


/* 视 口 宽度 小 于 320px， 背 景 颜色 为 灰色 */ 
body {background-color: grey’;} 
/* 视 口 宽 度 大 于 320px， 背 景 颜色 为 绿色 */ 
@media screen and (min-width: 320px) { 
body { 
background-color: green; 
} 


} 
/* 视 口 宽 度 大 于 550px， 背 景 颜色 为 黄色 */ 
@media screen and (min-width: 550px) { 
body { 
background-color: yellow; 
} 


} 
/* 视 口 宽度 大 于 768px， 背 景 颜色 为 橙色 */ 
emedia screen and (min-width: 768px) { 
body { 
background-color: orange; 
} 


} 
/* 视 口 宽度 大 于 960px， 背 景 颜 色 为 红色 */ 
emedia screen and (min-width: 960px) { 
body { 
background-color: red; 
} 
} 


8.8 层 到 样式 


@ 继承 

根据 CSS 规则 ， 子 元 素 继承 父 元 素 的 属性 。 例 如 : 

body{font-family: "微软 雅 黑 "; } 

通过 继承 ， 所 有 body 的 子 元 素 都 应 该 显示 “微软 雅 黑 ” 字 体 ， 子 元 素 的 子 元 素 也 一 样 。 

另外 , 不 是 所 有 属性 都 具有 继承 性 ，CSS 强制 规定 部 分 属性 不 具有 继承 性 , 例如 边框 、 
外 边 距 、 内 边 距 、 背 景 、 定 位 、 布 局 、 元 素 高 度 和 宽度 等 属性 不 具有 继承 性 。 

@ 层 辣 

层 县 (cascade) 是 指 CSS 能 够 对 同一 个 元 素 应 用 多 个 样式 表 的 能 力 。 
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例如 ， 外 部 样式 表 对 h3 声明 了 3 个 样式 属性 : 
h3{color:red;text-align:1left;font-size:12px;} 
内 部 样式 表 针 对 h3 声明 了 两 个 样式 属性 : 
h3{text-align:right;font-size:20px;} 


h3 选择 器 的 text-align 和 font-size 样式 属性 层 又 ， 假 如 拥有 内 部 样式 表 的 这 个 页 面 同 
时 与 外 部 样式 表 连 接 ， 那 么 h3 得 到 的 样式 如 下 : 


h3{color:red;text-align:right;font-size:20px;} 


即 color 属性 使 用 外 部 样式 表 声 明 ， 而 text-align 和 font-size 属性 会 被 内 部 样式 表 中 的 规则 
取代 。 

样式 表 允 许 以 多 种 方式 声明 样式 信息 ， 如 果 出 现 多 重 样 式 将 层 赤 为 一 个 。 样 式 的 层 苍 
性 会 带 来 问题 ， 例 如 同一 个 样式 属性 的 不 同样 式 声明 作用 于 同一 个 元 素 时 如 何 进行 选择 ? 
上 例 中 h3 选择 器 的 text-align 和 font-size 属性 为 什么 会 使 用 内 部 样式 表 呢 ? 即使 在 不 太 复 
杂 的 样式 表 中 也 可 能 有 两 个 或 更 多 规则 应 用 于 同一 个 元 素 ，CSS 通过 层 邯 处 理 这 种 冲突 。 

对 于 正在 浏览 的 网 页 ， 可 能 会 有 多 个 样式 表 对 其 产生 作用 ， 一 般 有 原 网 页 作者 的 样式 
表 、 用 户 的 样式 表 以 及 浏览 器 默认 样式 表 。 作 者 样式 是 指 页 面 作者 在 制作 网 页 时 定义 的 样 
式 表 ,简称 样式 表 。 用 户 样式 是 指 浏览 者 通过 浏览 器 向 页 面 加 载 的 自己 需要 的 样式 ， 在 下 
浏览 器 中 可 以 通过 【工具 】|【Intemet 选项 】| 【常规 】| 【外观 】| 【辅助 功能 】| 【用 户 样式 
表 】 实 现 。 如 果 使 用 Firefox 浏览 器 ， 需 要 把 样式 添加 到 usercss 文件 中 。 

层 盖 给 每 种 样式 表 分 配 一 个 重要 度 。 样式 表 被 认为 是 最 重要 的 , 其 次 是 用 户 的 样式 表 ， 
最 后 是 浏览 器 默认 样式 表 。 另外， 将 样式 标记 加 上 !important 可 以 优先 于 任何 规则 。 层 和 登 的 
重要 度 次 序 如 下 : 

(1) 标 有 !important 的 用 户 样式 ， 标 有 !important 的 作者 样式 。 

(2) 作者 样式 。 

(3) 用 户 样式 。 

(4) 浏览 器 默认 样式 。 

(5) 根据 CSS specificity 决定 。 

@ CSS specificity 

CSS specificity 称 特异 性 或 非凡 性 ， 它 是 衡量 CSS 值 优 先 级 的 一 个 标准 。specificity 
用 一 个 4 位 的 数字 串 来 表示 ， 更 像 4 个 级 别 ， 值 从 左 到 右 ， 左 面 的 最 大 ， 一 级 大 于 一 级 ， 
数位 之 间 没 有 进 制 ， 级 别 之 间 不 可 超越 。 一 个 选择 器 的 特异 性 是 如 下 计算 的 : 
(1) 如 果 是 内 联 样 式 ， 记 为 =1， 和 否则 记 为 a=0， 由 于 style 属性 是 写 在 HTML 标签 内 
不 存在 选择 器 ， 所 以 a=1，b=0，c=0 且 d=0。 
(2) 计算 选择 器 中 id 选择 器 的 数量 ， 计 为 b。 
(3) 计算 选择 器 中 类 选择 器 、 属 性 选择 器 和 伪 类 的 数量 ， 计 为 c。 
(4) 计算 选择 器 中 类 型 选择 器 的 数量 ， 计 为 d。 
(5) 忽略 伪 元 素 。 
(6) “*” 都 为 0。 


的 
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将 这 4 个 数字 相连 (a、b、c、d)， 得 到 specificity 值 ，specificity 值 高 的 规则 优先 ， 无 


论 书写 的 先后 顺序 如 何 ， 若 两 个 规则 的 specificity 值 相同 ， 则 后 定义 的 规则 优先 。CSS 
specificity 计算 示例 见 表 8.14。 


表 8.14 CSS specificity 计算 示例 表 


示 例 计算 结果 
3 specificity = 0, 0, 0, 1 
uli{...} specificity = 0, 0, 0, 2 


ulolliwaming {...} specificity = 0, 0, 1, 3 


limenu.level { ...} specificity = 0, 0, 2, 1 


#x34y { ...} specificity = 0, 1, 0, 0 


色 。 


<p style="..."> specificity = 1, 0, 0, 0 


[而 8.9 Css(specificity)html， 介 绍 了 CSS specificity 如 何 计算 并 对 样式 产生 作用 。 
源 代码 如 下 : 


<head> 

<title>css 特异 性 </title> 

<style> 
* {color: darkorange;} /* specificity = 0,0,0,0*/ 
div {color: orange;} /* Specificity = 0 ,0,0,1*/ 
body div {color: green;} /* specificity =0 ,0,0,2*/ 
#div-id {color: red;} 7* specificity = 0 0 1 0, 0 .8 
.div-class{color: blue;} /* specificity =0 ,0,1,0*/ 
div#div-id {color:gray;} /* specificity = 0 ,1,0,1*/ 


div.div-class{color:dodgerblue;} 
/* specificity=0 ，0 ,1 ,1*/ 
</style> 
</head> 
<body> 
<div id="div-id" class="div-class">CSS specificity 规则 示例 </div> 
</body> 


div#div-id{color:#gray;} 样 式 优先 ， 页 面 上 显示 的 文字 “CSS specificity 规则 示例 ”为 灰 
如 果 把 <body></body> 之 间 语 句 改 为 : 


<div id="div-id" class="div-class" style="color:black;">CSS specificity 
规则 示例 </div><!--/* specificity = 1 ，0 ，0 ，0 *#/--> 


则 文字 显示 为 黑色 ， 内 联 样式 优先 。 


@ !important 
虽然 层 倒 和 CSS 特异 性 决定 了 CSS 规则 最 后 的 应 用 效果 ， 但 是 用 户 也 可 以 通过 声明 


某 个 规则 的 “!important” 来 强调 此 规则 的 重要 性 。 


如 果 把 CSS(specificity).html 中 的 样式 body div{color:green:} 修 改 为 : 


body div{color:green!important;} 
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则 body div{color:greenlimportant:} 这 条 声明 的 规则 最 高 ， 文 字 显 示 为 绿色 。 


8.9 使 用 Chrome 开发 者 工具 检查 编 
辑 页 面 及 样式 i 


在 Google Chrome 开发 者 工具 的 Elements 面板 中 可 以 检查 并 实时 编辑 页 面 中 的 HIML 
标签 语句 和 CSS 样式 。 

如 果 要 实时 编辑 HTML 标签 语句 ， 只 需 双 击 选中 的 元 素 就 可 以 进行 更 改 ， 如 图 8.14 
所 示 。 


图 8.14 Chrome 开发 者 工具 示意 图 
在 Styles 窗口 中 可 以 实时 编辑 样式 属性 的 名 称 和 值 ， 如 图 8.15 所 示 。 如 果 要 编辑 名 称 
或 值 ， 用 鼠标 单 击 ， 然 后 进行 修改 ， 再 按 Enter 键 保 存 修改 即 可 。 在 默认 情况 下 ，CSS 修 
改 不 是 永久 的 ， 如 果 重 新 加 载 页 面 ， 修 改 的 内 容 就 会 丢失 。 


区 各 Cenaele Sources Network Performance Memer 


图 8.15 ”Styles 窗口 
提示 : 浏览 器 的 默认 样式 (灰色 显示 ) 不 能 进行 修改 。 
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在 Computed 窗口 中 可 以 实时 检查 并 编辑 当前 元 素 的 盒 模型 参数 ， 用 鼠标 单 击 就 可 以 
了 。 对 于 已 经 定位 的 元 素 ， 还 能 显示 position 以 及 top、right、bottom 和 left 属性 的 值 ， 如 
图 8.16 所 示 。 


图 8.16 ”Computed 窗口 


如 果 要 查看 对 页 面 进行 实时 更 改 的 历史 记录 ， 先 转 到 Sources 面板 中 ， 双 击 打 开 修 改 
过 的 文件 ， 在 显示 源 文件 的 区 域 右 击 ， 从 弹出 的 快捷 菜单 中 选择 Local modifications 命令 ， 
如 图 8.17 所 示 。 另 外 ， 使 用 Ctrl+Z 组 合 键 可 以 快速 撤销 修改 。 


民 全 Hemenms Console Sources Nework Performance Memory Applcavon Securty Audts 


"个 i110 
二 watch 
vCal gact 


外 部 样式 表 | Netwon Fieyxen > 


图 8.17 查看 对 页 面 进行 实时 更 改 的 记录 


8.10 ”小结 


本 章 简要 介绍 了 表现 和 CSS 的 基本 概念 , 重点 介绍 了 CSS 的 语法 和 CSS3 增加 的 语法 
及 使 用 方法 ， 探 讨 了 CSS 的 层 且 过程 和 CSS 特异 性 ， 并 通过 实例 进行 了 说 明 。 
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8.11 习题 


@ 选择 题 
(1) CSS 的 全 称 是 (  )。 
A. Computer Style Sheets B. Cascading Style Sheets 
C. Creative Style Sheets D. Colorful Style Sheets 
(2) 以 下 HTML 属性 用 来 定义 内 联 样式 的 是 ( )。 
A. Style B. class C. font D. styles 


(3) 以 下 正确 引用 外 部 样式 表 的 是 
A. <stylesheet>mystyle.css</stylesheet> 
B. <style src="mystyle.css"> 
C. <link rel="stylesheet" hre 全 "1.css"> 
D. <link rel="stylesheet" type="text/HTML" href="1.css"> 
(4) 在 以 下 选项 中 ， 可 以 正确 定义 所 有 Pp 的 字体 为 bold 的 是 (  ”)。 
A. <p style="text-size:bold"> 
B. <p style="font-size:bold"> 
C. pt{text-size:bold} 
D. pt{font-weight:bold} 
(5) 在 CSS 样式 文件 中 注释 正确 的 是 入 
A. /this is a comment // B. VWthis is a comment 
C. /*thisisacomment*/ D. ‘thisis a comment 
(6) 关于 CSS 以 下 说 法 错误 的 是 站 
A. 选择 器 表示 要 定义 样式 的 对 象 ， 可 以 是 元 素 本 身 ， 或 者 是 一 类 元 素 
B. 属性 是 指定 选择 器 所 具有 的 属性 
C. 属性 值 是 指数 值 加 单位 ， 例 如 25px 
D. 每 个 CSS 样式 必须 由 两 部 分 组 成 ， 即 选择 器 和 样式 声明 
(7) 下 列 选项 中 ，( ) 是 包含 选择 器 的 语法 。 
人 A. 选择 器 1 和 选择 器 2 之 间 用 空格 隔 开 , 含义 是 所 有 选择 器 1 中 包含 的 选择 器 2 
B."#" 加 上 自 定义 的 id 名 称 
C."." 加 上 自 定义 的 类 名 称 
D. 用 英文 逗号 分 隔 
(8) 下 列 关 于 样式 表 的 优先 级 的 说 法 不 正确 的 是 % 
A. 直接 定义 在 标签 上 的 CSS 样式 级 别 最 高 
B. 内 部 样式 表 次 之 
C. 外 部 样式 表 的 级 别 最 低 
D. 当 样 式 中 的 属性 重复 时 ， 先 设 的 属性 起 作用 
(9) 选择 具有 attr 属性 且 属 性 值 以 value 开头 的 每 个 元 素 的 属性 选择 器 是 〈 )。 
A. Ell[attr^=value] B. Ellattr=value] 
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C. El[lattr~=value] D. El[attr|=value] 
(10) 下 列 CSS 语法 规则 中 正确 的 是 和 
A. body:color=black B. {body:color:black} 
C. body{color:black} D. {body:color=black} 
@ 简 答 题 


(1) CSS 主要 选择 器 有 哪些 ? 如 何 使 用 ? 

(2) HTML 使 用 CSS 有 几 种 方法 ?它们 的 区 别 在 哪里 ? 
(3) 层 县 是 什么 含义 ?如 果 样 式 层 芭 如 何 处 理 ? 

(4) CSS 单位 em 和 rem 有 什么 区 别 ? 

(5) 在 CSS3 中 为 什么 要 用 媒体 查询 ?如 何 使 用 ? 
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W3C 建议 把 网 页 上 的 所 有 元 素 放 在 一 个 个 盒 模型 ( Box Model ) 中 , 用 户 可 以 通过 CSS 
来 控制 这 些 盒子 的 显示 属性 ， 把 这 些 盒子 进行 定位 完成 整个 页 面 的 布局 ， 盒 模型 是 CSS 定 
位 布局 的 核心 内 容 。 本 章 首先 介绍 CSS 铭 模 型 结构 和 类 型 ， 接 下 来 详细 讨论 CSS 定位 和 
CSS 基本 布局 ， 最 后 介绍 叮 叮 书店 首页 的 布局 过 程 和 操作 。 

本 章 要 点 : 

< 他 CSS 盒 模 型 。 

< 如 CSS 定位 。 

如 CSS 基本 布局 。 


9.1 CSS 使 模型 


9.1.1 CSS 盒 模型 概述 


CSS 盒 模型 (Box Model) 规定 了 元 素 处 理 内 容 、 内 边 距 、 边 框 和 外 边 距 的 方式 ， 如 
图 9.1 所 示 。 大 家 通过 CSS 盒 模型 示意 图 可 以 知道 ， 
content: 盒 模型 里 的 内 容 ， 即 元 素 的 内 容 。  ; : 
padding: 内 边 距 ， 也 称 填充 ， 指 内 容 与 边框 ; 
的 间距 。 : 
border: 边框 ， 指 盒子 本 身 。 
margin: 外 边 距 ， 指 与 其 他 盒 模型 的 距离 。 
外 边 距 默认 是 透明 的 ， 因 此 不 会 让 挡 其 后 面 
的 任何 元 素 。 


图 9.1 CSS 盒 模型 示意 图 
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内 边 距 、 边 框 和 外 边 距 可 以 应 用 于 一 个 元 素 的 所 有 边 ， 也 可 以 应 用 于 单独 的 边 。 盒 模 
型 的 内 边 距 、 边 框 和 外 边 距 按照 顺 时 针 的 顺序 可 分 别 分 为 top、right、bottom 和 left 4 个 边 ， 
如 图 9.2 所 示 。 


background-color 


margin4eft 
465-ul6veuw 


margin-bottom 


图 9.2 内 边 距 、 边 框 和 外 边 距 对 应 的 边 


内 边 距 、 边 框 和 外 边 距 都 是 可 选 的 ， 默 认 值 是 0， 但 许多 元 素 已 经 由 浏览 器 设置 了 外 
边 距 和 内 边 距 。 内 边 距 呈 现 了 元 素 的 背景 ， 外 边 距 可 以 是 负 值 ， 而 且 在 很 多 情况 下 都 要 使 
用 负 值 的 外 边 距 。 

在 CSS 中 ,元素 的 width 和 height 属性 默认 指 盒 模 
型 内 容 区 域 的 宽度 和 高 度 。 另 外 ， 增 加 内 边 距 、 边 框 不 
会 影响 内 容 区 域 的 尺寸 ， 但 是 会 增加 盒 的 尺寸 。 盒 模型 
的 实际 宽度 和 高 度 要 在 width 和 height 属性 值 的 基础 上 
加 上 内 边 距 、 边 框 的 距离 : 

盒 宽度 = 左边 框 + 左 内 边 距 + 宽 度 + 右 内 边 距 + 右 
边框 ; 

盒 高 度 = 上 边框 + 上 内 边 距 + 高 度 + 下 内 边 距 + 下 
例如 下 面 的 盒 模型 ， 示 意图 如 图 9.3 所 示 ， 其 内 容 图 9.3 Css 盒 模型 宽度 和 高 度 示意 图 
的 宽度 和 高 度 分 别 为 300px 和 200px。 

#box{ 

width:300px; 

height:200px; 

padding:10px; 

border:1lpx solid #000; 

margin:15px; 
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这 个 盒 模型 的 大 小 为 : 
盒 宽度 =1+10+300+10+1= 322px; 这 个 盒子 大 小 为 240x140px， 
内 容 区 为 200x100px。 


盒 高 度 =1+10+200+10+1=222px。 

在 CSS3 中 增加 了 一 个 用 户 界面 属性 box-sizing， 上 
于 设置 或 检索 盒 模型 大 小 的 组 成 模式 ， 值 为 content-box 
(默认 ) 和 border-box。 若 设置 为 content-box, 表示 padding 
和 border 不 被 包含 在 定义 的 width 和 height 之 内 ; 若 设 置 这 个 盒子 大 小 为 
为 border-box， 表 示 padding 和 border 被 包含 在 定义 的 人 内 容 区 为 
width 和 height 之 内 ， 盒 子 的 实际 宽度 和 高 度 就 等 于 设置 
的 width 和 height 值 ， 即使 设置 了 border 和 padding 也 不 
会 改变 盒子 的 大 小 。 

圆 91 Css3(box-sizing)html ， 该 例 说 明了 
box-sizing 属性 取 值 为 content-box 和 border-box 时 的 区 别 ， 效 果 如 图 9.4 
所 示 。 

源 代码 如 下 : 

<head> 

<title>CSS3 盒 模型 大 小 </tit1le> 
<style> 
div{width:200px;height:100px;padding:10px;border:10px solid #999999;} 
#boxl{ 
—webkit-box-sizing:content-box; 


图 9.4 CSS3(box-sizing).html 示意 图 


视频 讲解 


box-sizing:content-box; 
background:#EEE; 
} 
#box21{ 
-Webkit-box-sizing:border-box7 
box-sizing:border-box; 
background:#EEE;margin-top:10px; 
} 
</style> 
</head> 
<body> 
<div id="box1l"> 这 个 盒子 大 小 为 240X140px， 内 容 区 为 200X100px。</div> 
<div id="box2"> 这 个 盒子 大 小 为 200X100px， 内 容 区 为 160X 60px。</div> 
</body> 


9.1.2 CSS 内 边 距 


元 素 的 内 边 距 在 边框 和 内 容 区 之 间 , padding 属性 定义 元 素 边框 与 元 素 内 容 之 间 的 空白 
区 域 。CSS 内 边 距 的 属性 见 表 9.1。 
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表 9.1 CSS 内 边 距 的 属性 


属 性 描 述 
padding 简写 属性 ， 在 一 个 声明 中 设置 元 素 的 所 有 内 边 距 
padding-bottom 设置 元 素 的 下 内 边 距 
padding-left 设置 元 素 的 左 内 边 距 
padding-right 设置 元 素 的 右 内 边 距 
padding-top 设置 元 素 的 上 内 边 距 
@ padding 居 性 


padding 属性 定义 元 素 的 内 边 距 , 属性 值 可 以 使 用 长 度 值 或 百分比 值 , 但 不 允许 使 用 负 
值 。 如 果 和 希望 所 有 hl 元 素 的 各 边 都 有 10 像素 的 内 边 距 ， 可 以 如 下 书写 : 
hl{padding:10px;} 
用 户 还 可 以 按照 上 一 右 一 下 一 左 的 顺序 分 别 设置 各 边 的 内 边 距 ， 各 边 可 以 使 用 不 同 的 
单位 或 百分比 值 。 例 如 : 
hl{padding:10px 0.25em 2ex 20%;} 
@ 单 边 内 边 距 
通过 使 用 padding-top、padding-right、padding-bottom 和 padding-left 4 个 单独 的 属性 分 
别 设置 上 、 右 、 下 、 左 内 边 距 。 例 如 : 
hl{ 
padding-top:10px; 
padding-right:0.25em; 
padding-bottom:2ex; 
padding-left:20%; 
} 
@ 内 边 距 的 百分比 值 
用 户 可 以 为 元 素 的 内 边 距 设 置 百分比 值 , 百分比 值 是 相对 于 其 父 元 素 的 width 计算 的 。 
上 /下 内 边 距 与 左 / 右 内 边 距 一 致 ， 即 上 /下 内 边 距 的 百分比 值 会 相对 于 父 元 素 的 宽度 设置 ， 
而 不 是 相对 于 高 度 。 例 如 下 面 这 条 规则 把 段落 的 内 边 距 设置 为 父 元 素 width 的 10%: 
p{padding:10%;} 
如 果 段 落 的 父 元 素 是 下 面 的 div 元 素 ， 那 么 它 的 内 边 距 要 根据 div 的 width 计算 。 
<div style="width:200px;"> 
<p> 这 是 一 个 段落 。</p> 


</div> 


[ 贺 9? css(padding).html， 该 例 说 明了 如 何 设置 CSS 内 边 距 ， 效 果 如 图 9.5 所 示 。 
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每 个 边 拥有 相等 的 内 边 距 1.5cm 


上 和 下 内 边 距 是 0.5cm， 
左 和 右 内 边 距 是 2.3cm 


图 9.5 CSS(padding).html 示意 图 


源 代码 如 下 : 


<head> 
<title>padding 内 边 距 </title> 
<style> 
div { 
border: lpx solid #F00; 
margin-bottom: 2px; 
} 
#divl {padding: 1.5cm} 
#div2 {padding: 0.5cm 2.5cm} 
</style> 
</head> 
<body> 
<div id="div1l"><span> 每 个 边 拥 有 相等 的 内 边 距 1.5cm</span></div> 
<div id="div2"><span> 上 和 下 内 边 距 是 0.5cm， 左 和 右 内 边 距 是 2 .5cm</span></div> 
</body> 


9.1.3 CSS 边框 


元 素 的 边框 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 ，border 属性 允许 用 户 规定 元 素 
边框 的 样式 、 宽 度 和 颜色 ， 边 框 属性 见 表 9.2。 
表 9.2 CSS 边框 属性 


属 性 描 述 
border 简写 属性 ， 在 一 个 声明 中 设置 4 个 边 的 边框 属性 
border-style 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 边 框 设置 样式 
border-width 设置 元 素 所 有 边框 的 宽度 ， 或 者 单独 地 为 各 边 边框 设置 宽度 
border-color 设置 元 素 所 有 边框 中 可 见 部 分 的 颜色 ， 或 者 单独 地 为 各 边 边框 设置 颜色 
border-bottom 简写 属性 ， 在 一 个 声明 中 设置 下 边框 的 所 有 属性 


border-bottom-color 元 素 下 边框 的 颜色 
border-bottom-style 元 素 下 边框 的 样式 
border-bottom-width 元 素 下 边框 的 宽度 


border-left 简写 属性 ， 在 一 个 声明 中 设置 左边 框 的 所 有 属性 
border-left-color 元 素 左 边框 的 颜色 
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续 表 
属 性 描 述 

border-left-style 元 素 左边 框 的 样式 

border-left-width 元 素 左 边框 的 宽度 

border-right 简写 属性 ， 在 一 个 声明 中 设置 右边 框 的 所 有 属性 
border-right-color 元 素 右边 框 的 颜色 

border-right-style 元 素 右 边框 的 样式 

border-right-width 元 素 右 边框 的 宽度 

border-top 简写 属性 ， 在 一 个 声明 中 设置 上 边框 的 所 有 属性 
border-top-color 元 素 框 的 颜色 

border-top-style E 式 

border-top-width 


@ 边框 的 样式 
边框 样式 是 边框 最 重要 的 属性 ， 因 为 如 果 没有 边框 样式 ， 就 根本 没有 边框 。CSS 的 
border-style 属性 定义 了 10 个 边框 样式 ， 包 括 none， 见 表 9.3。 
表 9.3 border-style 属性 值 


值 描 述 
none 无 边框 
hidden 与 none 相同 ， 不 过 应 用 于 表 时 除外 
dotted 点 状 ， 在 大 多 数 浏览 器 中 呈现 为 实 线 
dashed 虚线 ， 在 大 多 数 浏览 器 中 呈现 为 实 线 
solid 实 
double 双 线 ， 双 线 的 宽度 等 于 border-width 的 值 
Sroove 3D 四 槽 ， 其 效果 取决 于 border-color 的 值 
ridge 3D 芍 状 ， 其 效果 取决 于 border-color 的 值 
inset 3D inset， 其 效果 取决 于 border-color 的 值 
outset 3D outset， 其 效果 取决 于 border-color 的 值 


用 户 可 以 为 边框 定义 多 个 样式 ， 例 如 : 
.pl{border-style:solid dotted dashed double;} 
小 上 es 妇 Y 二 雪 力 框 样 坏 印字 绪 上 上 本 一 |] 
以 上 给 类 名 为 pl 的 元 素 定义 了 4 种 边框 样式 , 即 实 线 上 一 
边框 、 点 线 右边 框 、 虚 线 下 边框 和 双 线 左边 框 。 可 
如 果 用 户 希 望 为 元 素 的 某 一 个 边 设置 边框 样式 ， 而 不 是 
设置 所 有 边 的 边框 样式 ， 可 以 使 用 border-top-style 、 


border-right-style、 border-bottom-style 和 border-left-style 属性 。 
贺 93 Css(border).html， 该 例 使 用 了 各 种 边框 样式 ， 
效果 如 图 9.6 所 示 。 


源 代码 如 下 : 图 9.6 CSS(border).html 示意 图 
<head> 

<title>border 边框 </title> 

<style> 
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p {border-color: #F00;} 
-dotted {border-style: dotted;} 
p-.dashed { 

border-style: dashed; 


器 


background-color: #CF0; 


} 
p.solid {border-style: solid;} 
p.double {border-style: double;} 
P.groove {border: groove 10px;} 
p:ridge {border: ridge 1l0px;} 
p.inset {border: inset 1l0px;} 
p-.outset {border: outset 10px;} 

</style> 

</head> 

<body> 

<p class="dotted"> 点 状 </p> 

<p class="dashed"> 虚 线 </p> 

<p class="solid"> 实 线 </p> 

<p class="double"> 双 线 </p> 

<p class="groove">3D 四 槽 </p> 

<p class="ridge">3D 昔 状 </p> 

<p class="inset">3D inset</p> 

<p class="outset">3D outset</p> 

</body> 


@ 边框 与 背景 

元 素 的 背景 是 内 容 、 内 边 距 和 边框 的 背景 ， 盒 模型 的 边框 绘制 在 “元 素 的 背景 之 上 ”， 
元 素 的 背景 应 当 出 现在 边框 的 可 见 部 分 之 间 ， 见 实例 CSS(border).html 的 虚线 边框 。 

全 边框 的 宽度 

用 户 可 以 通过 border-width 属性 为 边框 指定 宽度 。 为 边框 指定 宽度 有 两 种 方法 ， 一 是 
指定 长 度 值 ， 例 如 2px 或 0.1em; 二 是 使 用 thin、medium〔 默 认 值 ) 和 thick 关键 字 之 一 。 
CSS 没有 定义 这 几 个 关键 字 的 具体 宽度 ， 所 以 一 个 浏览 器 可 能 把 thin、medium 和 thick 分 
别 设置 为 5px、3px 和 2px， 而 另 一 个 浏览 器 将 它们 分 别 设置 为 3px、2px 和 lpx。 

例如 设置 边框 的 宽度 : 

p{border-style:solid;border-width:5px;} 
或 者 : 

p{border-style:solid;border-width:thick;} 
用 户 可 以 按照 上 一 右 一 下 一 左 的 顺序 设置 元 素 的 各 边 边 框 ， 例 如 : 


p{border-style:solid;border-width:15px 5px 15px 5px;} 


户 也 可 以 通过 border-top-width、border-right-width、border-bottom-width 和 border- 
left-width 属性 分 别 设置 边框 各 边 的 宽度 ， 例 如 : 
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Pi 
border-style:solid; 


border-top-width:15px;border-right-width:S5px; 
border-bottom-width:15px;border-left-width:S5px; 
} 
如 果 和 希望 显示 边框 ， 必 须 设置 边框 样式 。border-style 的 默认 值 是 none， 如 果 没 有 声明 
其 他 边框 样式 ， 即 使 设置 边框 宽度 ， 边 框 也 是 不 存在 的 ， 例 如 : 
p{border-width:50px;} 
@ 边框 的 颜色 
CSS 使 用 border-color 属性 设置 边框 颜色 ， 默 认 的 边框 颜色 是 元 素 本 身 的 前 景色 。 如 
果 没 有 为 边框 声明 颜色 ， 它 将 与 元 素 的 文本 颜色 相同 。 如 果 元 素 没有 任何 文本 ， 边 框 颜色 
是 其 父 元 素 的 文本 颜色 。 颜 色 值 可 以 使 用 命名 颜色 、 十 六 进 制 颜色 值 和 RGB 值 ， 例 如 : 
pt 
border-style:solid; 


border-color:blue rgb(25%,35%,45%) #909090 red; 
} 


通过 border-top-color、border-right-color、border-bottom-color 和 border-left-color 属性 
可 以 分 别 设置 单 边 边框 的 颜色 。 
例如 为 hl 元 素 指定 黑色 实 线 边框 ， 而 右边 框 为 红色 实 线 : 
hl{ 
border-style:solid; 
border-color:black;border-right-color:red; 


} 

CSS 边框 颜色 值 transparent 表示 边框 颜色 为 透明 ， 因 此 可 以 创建 有 宽 
度 但 不 可 见 边框 。 

贺 "4 CSS(border-transparent).html， 该 例 实现 了 透明 边框 的 效果 ， 


如 图 9.7 所 示 。 页 面 显 示 时 是 一 个 没有 边框 的 块 ， 当 鼠标 指针 指向 “透明 回 GAn 和 
边框 ”时 显示 红色 的 边框 。 视频 讲解 
秀 日 透明 
We 边框 


图 9.7 CSS(border-transparent).html 示意 图 


源 代 码 如 下 : 


<head> 
<title>border-transparent 边框 透明 </title> 
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<style> 
/*CSS 边框 颜色 的 默认 值 是 transparent， 即 边框 颜色 为 透明 。*/ 
div { 
border: solid 5px transparent; 
width: 40px;height: 40px; 
padding: 30px; 
} 
div:hover {border-color: #F00;} 
</style> 
</head> 
<body> 
<qdiv> 透 明 边框 </div> 
</body> 


9.1.4 CSS3 边框 


CSS3 增加 了 圆 角 边 框 、 图 像 边框 和 阴影 ， 见 表 9.4。 


表 9.4 CSS3 边框 属性 
属 性 描述 


border-radius ， -个 声明 中 设置 元 素 4 个 边 的 圆 角 边框 
border-top-left-radius :上 角 的 圆 角 边框 
border-top-right-radius 设置 1 上 角 的 圆 角 边框 


1 下 角 的 圆 角 边框 
设置 ` 角 的 圆 角 边框 
简写 属性 ， 边 框 样式 使 用 图 像 来 填充 


border-bottom-right-radius 


border-bottom-left-radius 


border-image 

border-image-source 图 像 边框 使 用 的 图 像 路 径 
border-image-slice 图 像 边框 使 用 的 图 像 分 割 方式 
border-image-width 图 像 边框 的 宽度 
border-image-outset 图 像 边框 背景 图 的 扩展 


border-image-repeat / 平 铺 (repeat) 、 铺 满 (round) 或 拉 伸 stretch) 


box-shadow 


@ 圆 角 边框 


在 CSS3 中 ，border-radius 属性 用 于 设置 元 素 4 个 边 的 圆 角 边框 ， 用 户 也 可 以 使 用 
border-top-left-radius 、border-top-right-radius 、border-bottom-right-radius 和 border-bottom- 


left-radius 分 别 设置 左上 角 、 右 上 角 、 右 下 角 和 左下 角 的 圆 角 边框 。 其 语法 如 下 


border-radius: [ <length> | <percentage> ] {1,4} [/ [<length> | <percentage> ] 


2A 


border-radius 属性 有 两 个 参数 ， 以 “/” 分 隔 ， 每 个 参数 允许 设置 1 一 4 个 参数 值 ， 第 1 
个 参数 表示 水 平 圆 角 半径 ， 第 2 个 参数 表示 垂直 圆 角 半径 ， 单 位 可 以 是 长 度 或 百分比 ， 不 


允许 为 负 值 ， 如 果 第 2 个 参数 省 略 ， 默 认 等 于 第 1 个 参数 。 


如 果 提 供 全 部 参数 值 ， 将 按 上 左 一 上 右 一 下 右 一 下 左 的 顺序 设置 4 个 角 ; 如 果 只 提供 
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一 个 ， 将 用 于 全 部 的 角 ; 如 果 提 供 两 个 ， 第 1 个 用 于 上 左 、 下 右 , 第 2 个 用 于 上 右 、 下 左 ; 
如 果 提 供 3 个， 第 1 个 用 于 上 左 ， 第 2 个 用 于 上 右 、 下 左 ， 第 3 个 用 于 下 右 。 

@ 阴影 

在 CSS3 中 ，box-shadow 属性 用 于 向 边框 添加 一 个 或 多 个 阴影 。 其 语法 如 下 


box-shadow: h-shadow v-shadow blur spread color inset; 


其 参数 分 别 是 内 部 阴影 、 水 平 偏 移 值 、 垂 直 偏 移 值 、 模 糊 距离 、 阴 影 尺 寸 和 阴影 颜色 ， 
在 4 个 长 度 值 中 只 有 两 个 是 必需 的 〈 当 最 后 两 个 长 度 值 不 存在 的 时 候 颜 色 值 会 被 当 作 阴影 
颜色 ， 而 0 值 会 被 添加 到 模糊 半径 上 )。 

户 可 以 设 定 多 组 阴影 效果 ， 每 组 参数 值 用 逗号 分 隔 ， 若 省 略 则 长 度 值 是 0。 其 具体 
参数 值 的 含义 见 表 9.5。 


表 9.5 ”box-shadow 属性 值 


值 描 述 
h-shadow 必需 。 阴 影 水 平 偏 移 值 ， 可 以 为 负 值 
V-shadow 必需 。 阴 影 垂 直 偏 移 值 ， 可 以 为 负 值 
blur 可 选 。 阴 影 模糊 值 ， 不 允许 为 负 值 
spread 可 选 。 阴 影 外 延 值 (阴影 距离 )， 可 以 为 负 值 
color 可 选 。 阴 影 的 颜色 
inset 可 选 。 内 阴影 ， 该 值 为 空 时 ， 则 对 象 的 阴影 类 型 为 外 阴影 
全 图 像 边框 


通过 CSS3 的 border-image 属性 可 以 使 用 图 片 来 创建 边框 。 border-image 属性 是 一 个 简 
写 属性 , 用 于 设置 border-image-source、 border-image-slice、 border-image-width、 border-image- 
outset 和 border-image-repeat， 如 果 省 略 ， 默 认 值 为 none、100%、1、0 和 stretch。 

border-image 的 语法 如 下 : 

border-image : <'border-image-source'> || <'border-image-slice'> [ / 

<'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? 

11 <'border-image-repeat'> 

border-image-slice 设置 边框 背景 图 的 分 割 〈 切 片 ) 方式 。 其 语法 如 下 : 


border-image-slice: [ <number> | <percentage> ]{1,4} && fill? 


<number> 值 代表 图 像 中 的 像素 (如 果 是 位 图 图 像 ) 或 矢量 坐标 (如 果 是 矢量 图 像 )。 

该 属性 指定 从 上 、 右 、 下 、 左 方位 来 切割 图 像 ， 将 图 像 分 成 4 个 角 、4 条 边 和 中 间 区 
域 ， 共 9 份 ， 俗 称 “ 九 宫 格 ” 中 间 区 域 始终 是 透明 的 〈 即 没有 图 像 填 充 )， 除 非 加 上 关键 
字 f 纠 。 切 割 的 顺序 和 位 置 如 图 9.8 和 图 9.9 所 示 。 


[ 基 下 芝 下 天 下 王 直 二 | 
人 多 人 9 9 


图 9.8 border-image-slice 属性 切割 顺序 示意 图 
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图 9.9 border-image-slice 属性 切割 后 的 位 置 示意 图 


在 图 9.9 中 ，1、2、3、4 切片 填充 边框 的 4 个 角 ，5、6、7、8 切片 填充 上 、 右 、 下 、 
左边 框 的 4 个 边 。 另 外 ， 切 过 的 区 域 有 可 能 会 重合 ， 如 果 右 切 和 左 切 的 值 之 和 大 于 等 于 盒 
子 的 宽度 ， 则 顶部 区 域 和 底部 区 域 为 空白 ， 反 之 亦 然 。 

border-image-slice 属性 不 允许 为 负 值 ， 如 果 设 置 为 负 值 或 者 设置 的 值 大 于 盒子 的 高 度 
或 宽度 都 将 被 置 为 100%。 

border-image-outset 属性 用 于 指定 边框 图 像 向 外 扩展 的 数值 ， 如 果 值 为 
10px, 表示 图 像 在 原来 所 在 位 置 的 基础 上 往外 扩展 10px 显示 。 其 语法 如 下 : 

border-image-outset: [ <length> | <number> ]{1,4} 

[加 9.5 CSS3borden html， 该 例 使 用 CSS3 的 各 种 边框 样式 ,效果 
如 图 9.10 所 示 。 

源 代码 如 下 : 


<head> 


<title>CSS3 边框 属性 </title> 
<style> | 


视频 讲解 


#radius, #shadow, #shadow-inset { 
width: 200px;height: 50px; 


margin-bottom: 10px; 二 人 
background: #AAAAAA; 
} $ ba 
/* 设 置 #radius 元 素 4 个 边 的 圆 角 边框 ， 水 平和 垂 SS 
直 圆 角 半 径 为 0.5rem*/ 
#radius {border-radius: 0.5rem;} hb4 4 
有 侧 值 一 + 本 


/* 给 #shadow 元 素 添加 一 个 阴影 ,水平 偏 移 5px, 垂 


直 偏 移 5px， 阴 影 颜色 为 rgba (0，0，0，0.8)*/ 


#shadow { 无 仙 值 一 :党 
—webkit-box-shadow: 5px 5px rgba(0, 0, Ys 
0, 0.8); 


box-shadow: 5px 5px rgba(0，0，0，0.8); 图 9.10 CSS3(border).html 示意 图 
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} 
/* 给 #shadow-inset 元 素 添加 一 个 内 阴影 ， 水 平 偏 移 0px， 垂 直 偏 移 0px， 阴 影 模糊 值 
为 20px， 阴 影 距离 为 5px， 阴 影 颜色 为 rgba(0，0，0，0.8)*/ 
#shadow-inset { 
—webkit-box-shadow: inset Opx Opx 20px rgba(0, 0, 0, 0.8); 
box-shadow: inset Opx Opx 20px 5px rgba(0, 0, 0, 0.8); 
> 
#border-image-1, #border-image-2 { 
width: 81lpx;height:81px; 
margin-bottom: 10px; 
二 
/* 使 用 "images/border-image .png" 图 像 给 #border-image-1 元 素 设置 图 像 边框 ， 
从 上 、 右 、 下 、 左 方位 按 27px 来 切割 图 像 ， 图 像 边框 宽度 为 14px， 图 像 拉 伸 */ 
#border-image-l1 { 
-webkit-border-image: Url("images/border-image.png") 27 27 27 
27 /14px stretch; 
-o-border-image: url("images/border-image.png") 27 27 27 27 
/14px stretch; 
border-image: Url ("images/border-image.png") 27 27 27 27 /14px stretch; 
} 
#border-image-2 { 
-webkit-border-image: url("images/border-image.png") 27 27 27 
27 /27px stretch; 
-o-border-image: url("images/border-image.png") 27 27 27 27 
/27px stretch; 
border-image: Url ("images/border-image.png") 27 27 27 27 /27px stretch; 
} 
#border-image-3, #border-image-4 { 
width: 200px;height: 60px; 
margin-bottom: 10px; 
border-image-width: 20px; 
} 
/* 使 用 "images/background-image.jpg" 图 像 给 #border-image-3 元 素 设置 图 像 
边框 ， 从 上 、 右 、 下 、 左 方位 按 20px 来 切割 图 像 ， 中 间 区 域 显示 图 像 ， 图 像 拉 伸 */ 
#border-image-3 { 
-webkit-border-image: url("images/background-image.jpg") 20 20 
20 20 stretch; 
-o-border-image: Url ("images/background-image.jpg") 20 20 20 20 stretch; 
border-image: url ("images/background-image.jpg") 20 20 20 20 fill stretch; 
} 
#border-image-4 { 
-webkit-border-image: url ("images/background-image.jpg") 20 20 
20 20 /20px stretch; 
-o-border-image: url("images/background-image.jpg") 20 20 20 20 
/20px stretch; 
border-image: url("images/background-image.jpg") 20 20 20 20 
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/20px stretch; 
上 
</style> 

</head> 
<body> 
<div id="radius"></div> 
<div id="shadow"></div> 
<div id="shadow-inset"></div> 
<div id="border-image-1"></div> 
<div id="border-image-2"></div> 
<div id="border-image-3"> 有 fill 值 </div> 
<div id="border-image-4"> 无 fill 值 </div> 
</body> 


提示 : 谷歌 浏览 器 目前 不 完全 支持 border-image 属性 。 
9.1.5 ”CSS 外 边 距 


围绕 在 元 素 边框 周围 的 空白 区 域 是 外 边 距 , 设置 外 边 距 使 用 margin 属性 ,， margin 属性 
接受 任何 长 度 单位 、 百 分 比 数 值 甚至 负 值 。 外 边 距 属性 见 表 9.6。 
表 9.6 CSS 外 边 距 属 性 


属 性 描 述 
margin 简写 属性 ， 用 于 在 一 个 声明 中 设置 所 有 外 边 距 届 性 
margin-bottom 元 素 的 下 外 边 距 
margin-left 元 素 的 左 外 边 距 
i 元 素 的 右 外 边 距 
margin-top 元 素 的 上 外 边 距 
@ 值 的 复制 


在 输入 样式 属性 值 时 会 有 一 些 重复 的 值 ， 例 如 

p{margin:0.5em lem 0.5em lem;} 

通过 值 复制 ， 不 必 重 复 地 输入 这 些 数 字 ， 例 如 下 面 用 两 个 值 取代 前 面 的 4 个 值 
p{margin:0.5em lem;} 


CSS 定义 了 一 些 规 则 ， 人 允许 用 户 为 外 边 距 指 定 少 于 4 个 值 ， 规 则 如 下 

(1) 如 果 缺 少 左 外 边 距 的 值 ， 则 使 用 右 外 边 距 的 值 。 

(2) 如 果 缺 少 下 外 边 距 的 值 ， 则 使 用 上 外 边 距 的 值 。 

(3) 如 果 缺 少 右 外 边 距 的 值 ， 则 使 用 上 外 边 距 的 值 。 

换 句 话说 , 如 果 为 外 边 距 指定 了 3 个 值 , 则 第 4 个 值 ( 即 左 外 边 距 ) 会 从 第 2 个 值 ( 右 
外 边 距 ) 复制 得 到 ; 如 果 给 定 了 两 个 值 ， 第 4 个 值 会 从 第 2 个 值 复制 得 到 ， 第 3 个 值 (下 
外 边 距 ) 会 从 第 1 个 值 ( 上 外 边 距 ) 复制 得 到 ; 最 后 一 个 情况 ， 如 果 只 给 定 一 个 值 ， 那 么 
其 他 3 个 外 边 距 都 由 这 个 值 (上 外 边 距 ) 复制 得 到 。 
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利用 这 个 机 制 ， 用 户 只 需 指定 必要 的 值 ， 例 如 : 


hl{margin:0.25em lem 0.5em;} /* 等 价 于 0.25em lem 0.5em lem */ 


h2{margin:0.5em lem;} /* 等 价 于 0.5em lem 0.5em lem */ 
p{margin:1px;} /* 等 价 于 lpx lpx lpx lpx */ 
四 margin 居 性 


margin 属性 接受 任何 长 度 单位 , 可 以 是 像素 或 em,margin 属性 值 也 可 以 被 设置 为 auto， 
的 是 为 外 边 距 设置 长 度 值 。margin 属性 长 度 值 见 表 9.7。 
表 9.7 margin 属性 长 度 值 


纹 


值 描 述 
auto | 浏览 器 计算 外 边 距 
length | 具体 单位 值 的 外 边 距 ， 例 如 像素 、 厘 米 等 ， 其 默认 值 是 0px 
% 基于 父 元 素 宽度 的 百分比 的 外 边 距 


例如 长 度 单位 使 用 像素 : 


hl{margin:10px Opx 15px Spx;} 
当然 还 可 以 使 用 百分比 数值 : 
p{margin:10%;} 


百分数 是 相对 于 父 元 素 的 width 计算 的 。 
margin 的 默认 值 是 0， 如 果 用 户 没有 为 margin 声明 一 个 值 ， 就 不 会 出 现 外 边 距 。 


外 边 距 。 例 如 : 
h21{ 
margin-top:20px;margin-right:30px; 
margin-bottom:30px;margin-left:20px; 
} 


加 .6 CSS(margin).html， 该 例 说 明了 如 何 设 置 外 边 距 ， 效 果 如 图 9.11 所 示 。 


这 个 块 没有 指定 外 边 距 


指定 的 外 边 距 。 


区 


| 这 个 块 没有 指定 外 边 距 。 


图 9.11 CSS(margin).html 示意 图 
源 代码 如 下 : 


<head> 
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<title>margin 外 边 距 </title> 
<style> 
div {border: lpx solid #000;width: 200px;height: 50px;} 
div.margin {margin: 20px 40px 30px 40px;} 
</style> 

</head> 

<body> 

<div> 这 个 块 没有 指定 外 边 距 。</div> 

<div class="margin"> 这 个 块 带 有 指定 的 外 边 距 。</div> 

<div> 这 个 块 没有 指定 外 边 距 。</div> 

</body> 

全 外 边 距 合并 

外 边 距 合并 是 指 当 两 个 垂直 外 边 距 相遇 时 它们 将 形成 一 个 外 边 
距 ， 合 并 后 的 外 边 距 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 
大 者 。 

例如 当 一 个 元 素 出 现在 另 一 个 元 素 的 上 面 时 ， 第 1 个 元 素 的 下 外 
边 距 与 第 2 个 元 素 的 上 外 边 距 会 发 生 合并 ， 如 图 9.12 所 示 ， 两 个 元 素 
之 间 的 空白 距离 是 20px， 而 不 是 30px。 

外 边 距 合并 实际 上 非常 重要 。 例 如 有 几 个 段落 组 成 的 文本 ,第 1 
个 段落 上 面 的 空白 区 域 等 于 段落 的 上 外 边 距 ， 如 果 没 有 外 边 距 合并 ， 
后 续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 外 边 距 的 和 ， 这 
意味 着 段落 之 间 的 空白 区 域 是 页 面 顶 部 的 两 倍 ; 如 果 有 了 外 边 距 合并 ， 图 9.12 外边 距 合并 
段落 之 间 的 上 外 边 距 和 下 外 边 距 合 并 在 一 起 ， 这 样 每 个 段落 之 间 以 及 
段落 和 其 他 元 素 之 间 的 空白 区 域 就 一 样 了 。 


9.1.6 CSS 轮廓 


轮廓 是 绘制 在 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 的 作用 。 轮 
廓 属性 见 表 9.8。 


下 外 边 距 20px 


上 外 边 距 10px 


表 9.8 CSS 轮廓 属性 


简写 属性 ， 用 于 在 一 个 声明 中 设置 所 有 的 轮廓 属性 


outline-color 轮廓 的 颜色 
outline-style | 轮廓 的 样式 


outline-width 轮廓 的 宽度 
轮廓 线 不 会 占据 空间 ， 不 会 影响 元 素 的 尺寸 ， 不 一 定 是 矩形 。outline 简写 属性 在 一 个 
声明 中 设置 所 有 的 轮廓 属性 , 用 户 可 以 按 顺 序 设置 outline-color、 outline-style、 outline-width 
属性 ，outline 画 在 border 的 外 面 。 
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9.2 CSS 布局 


网 页 上 的 布局 是 通过 盒 模型 来 完成 的 , 用 户 可 以 设置 CSS 的 布局 属性 控制 这 些 盒子 来 


完成 整个 页 面 的 布局 ， 表 9.9 列 出 了 CSS 的 布局 属性 。 
表 9.9 CSS 布局 属性 


display 设置 元 素 的 显示 类 型 

float | 规定 元 素 是 否 应 该 浮动 

clear | 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 

visibility | 规定 元 素 是 否 可 见 。 与 display 不 同 ， 此 属性 为 隐藏 的 对 象 保留 其 占据 的 空间 
overflow | 设置 当 元 素 的 内 容 溢出 时 的 处 理 方式 

overflow-x | 设置 当 元 素 的 内 容 横向 溢出 时 的 处 理 方式 

overflow-y 设置 当 元 素 的 内 容 纵向 溢出 时 的 处 理 方式 


9.2.1 盒 模型 显示 类 型 


@ display 居 性 

元 素 的 显示 类 型 可 以 使 用 display 属性 来 显 式 定 义 ，display 属性 规定 元 素 的 盒 模型 显 
示 类 型 ， 任 何 元 素 都 可 以 通过 display 属性 改变 默认 显示 类 型 。display 属性 常用 的 选项 值 
见 表 9.10。 


表 9.10 display 属性 值 


inline-block 
list-item 作为 列表 显示 
flex 弹性 伸缩 盒 


行内 弹性 伸缩 盒 


如 果 从 布局 角度 来 分 析 ， 这 些 显示 类 型 可 以 划 归 为 block、inline 和 flex 3 种 ， 其 他 类 
型 是 这 3 种 类 型 的 特殊 显示 。 


1) none | 
none 属性 值 表示 隐藏 并 取消 盒 模型 , 所 包含 的 内 容 不 
会 被 浏览 器 解析 和 显示 。 用 户 通过 把 display 属性 设置 为 i 
none， 该 元 素 及 其 所 有 内 容 不 再 显示 ， 也 不 占用 文档 中 的 
空间 。 本 元 委 


例如 实例 CSS(display).html 页 面 中 有 两 个 <div>， 


- 图 9.13 CSS(display).html 示意 图 1 
<div> 下 面 有 两 个 行内 元 素 <a> 和 <span>， 如 图 9.13 所 示 。 ee 
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<div id="div1"> 显 示 块 </div> 
<div id="div2"> 隐 藏 块 </div> 
<a href="#" id="al"> 链 接 </a> <span> 行 内 元 素 </span> 


在 内 部 样式 表 中 添加 样式 ， 让 id 为 “div2” 的 块 隐藏 ， 如 图 9.14 所 示 。 


#div2{display:none;} 区 示 瑞 
可 以 看 到 id 为 “div2” 的 块 隐藏 起 来 不 显示 了 ， 并 且 

原先 所 占据 的 区 域 被 下 面 的 元 素 占据 。 证 要 行内 元 系 
2) block 


图 9.14 CSS(display).html 示意 图 2 
block 显示 为 块 状元 素 , 块 状元 素 的 宽度 为 100%， 而 So 


且 后 面 隐藏 附带 有 换行 符 ， 使 块 状元 素 始 终 占据 一 行 。<div> 常 被 称 为 块 状元 素 ， 这 意味 着 
这 些 元 素 显示 为 一 块 内 容 。 例 如 例 CSS(display).html 中 的 两 个 <div> 分 别 占据 一 行 ， 显 示 在 
两 行 上 。 

3) inline 

inline 显示 为 行内 元 素 ， 元 素 前 后 没有 换行 符 ， 行 内 元 素 没 有 高 度 和 宽度 ， 因 此 也 就 
没有 固定 的 形状 ， 显 示 时 只 占据 其 内 容 的 大 小 。 例 如 <a> 和 <span> 称 为 行内 元 素 。 

用 户 可 以 使 用 display 属性 改变 元 素 盒 模型 的 显示 类 


型 , 这 意味 着 通过 将 display 属性 设置 为 block 可 以 让 行内 于 
元 素 表现 得 和 块 元 素 一 样 ,也 可 以 通过 将 display 属性 设置 
为 inline 让 块 元 素 表现 得 像 行内 元 素 一 样 。 十 未 


在 例 CSS(display).html 中 <a> 和 <span> 是 行内 元 素 ， 
所 以 显示 在 一 行 上 ， 如 果 将 <a> 变 成 块 元 素 ， 则 <a> 和 图 915 CSS(display)html 示意 图 3 
<span> 就 不 在 一 行 上 显示 了 ， 如 图 9.15 所 示 。 

#al{display:block;} 


4) list-item 

list-item 属性 值 表示 列表 项 目 ， 其 实际 上 也 是 块 状 显示 ， 不 过 是 一 种 特殊 的 块 状 类 型 ， 
它 增加 了 缩 进 和 项 目 符号 。 

在 例 CSS(display).html 中 <span> 行 内 元 素 </span><span> 行 内 元 素 </span> 是 两 个 行内 
元 素 ， 可 以 将 它 变 成 列表 块 ， 如 图 9.16 所 示 。 


span{display: list-item;margin-left: 20px; 
list-style-type: circle;} 
链接 


5) inline-block 行内 元 素 

inline-block 属性 值 表示 行内 块 ， 其 实际 上 也 是 块 , 不 
过 显示 时 按 元 素 宽度 占据 空间 ， 而 不 是 占据 一 行 。 

在 例 CSS(display).html 中 可 以 看 到 把 无 序列 表 变 成 图 9.16 CSS(display)html 示意 图 4 
行内 块 元 素 后 这 些 列表 项 显示 在 一 行 上 ， 如 图 9.16 所 示 。 


li{display: inline-block;} 
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[ 圆 9.7 CSS(display) html 的 完整 源 代码 。 


<head> 
<title> 元 素 显示 类 型 </title> 
<style> 
divt{ 
border:lpx solid #F00; 
width:100px;height:100px; 
} 
#div2{display: none;} 
a{display: block;} 


视频 讲解 


span{display: list-item;margin-left: 20px;list-style-type: circle;} 


li{display: inline-block;} 
</style> 
</head> 
<body> 
<div id="div1"> 显 示 块 </div> 
<div id="div2"> 隐 茂 块 </div> 


<a href="#" id="al"> 链 接 </a> <span> 行 内 元 素 </span><span> 行 内 元 素 </span> 


<ul> 
<1i><a href="#"> 导 航 按钮 </a></1i> 
<1i><a href="#"> 导 航 按钮 </a></1i> 
<1i><a href="#"> 导 航 按钮 </a></1i> 

</ul> 

</body> 


@ 常用 元 素 默 认 的 盒 模 型 类 型 


CSS 盒 模型 按 显示 类 型 基本 上 分 为 两 种 , 即 Block ( 块 状 ) 和 Inline (行内 , 也 称 为 “内 


联 ”)。 常 用 元 素 默 认为 块 状元 素 的 见 表 9.11。 
表 9.11 常用 块 状元 素 表 


块 状元 素 说 了 明 

address 定 信息 ， 例 如 地 址 、 签 名 、 作 者 、 文 档 信息 。 一 般 显示 为 斜体 效果 
blockquote 本 中 的 一 段 引 用 语 。 一 般 为 缩 进 显示 

div 表示 通用 包含 块 ， 没 有 明确 的 语义 

dl 表示 定义 列表 

fieldset 表示 字段 集 ， 显 示 为 一 个 方 框 ， 用 来 包含 文本 和 其 他 元 素 

form 说 明 所 包含 的 控件 是 某 个 表单 的 组 成 部 分 

hl 一 h6 表示 标题 ，hl 表示 一 级 标题 ， 字 号 最 大 ，h6 表示 最 小 级 别 标题 ， 字 号 最 小 
hr 画 一 条 横 线 

ol 有 序列 表 

Pp 表示 一 个 段落 

pre 以 国定 宽度 字体 显示 文本 ， 保 留 代码 中 的 空格 和 回 车 

table 表示 所 含 内 容 组 织 成 含有 行 和 列 的 表格 形式 

ul 表示 不 排序 的 项 目 列表 

li 表示 列表 中 的 一 个 项 目 

legend 在 fieldset 元 素 绘制 的 方 框 内 插入 一 个 标题 


行内 元 素 也 会 遵循 盒 模型 基本 规则 ， 
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例如 可 以 定义 外 边 距 、 内 边 距 和 边框 ， 可 以 定义 


背景 。 它 的 最 小 内 容 单 元 也 会 呈现 矩形 形状 ， 但 它 显 示 的 高 度 和 宽度 只 能 根据 所 包含 内 容 
的 高 度 和 宽度 来 确定 。 常 用 元 素 默认 为 行内 元 素 的 见 表 9.12。 
表 9.12 常用 行内 元 素 表 
行内 元 素 说 ” 明 
a 表示 超 链 接 
abbr 标注 内 部 文本 为 缩写 ， 用 title 属性 标示 缩写 的 全 称 
acronym 表示 取 首 字母 的 缩写 词 ， 一 般 显 示 为 粗 体 ， 部 分 浏览 器 支持 
b 指定 文本 以 粗 体 显示 
bdo 用 于 控制 包含 文本 的 阅读 顺序 ， 例 如 <bdo dir="rtl">english</bdo> 
big 指定 所 含 文本 要 以 比 当前 字体 和 大 的 字体 显示 
br 插入 一 个 换行 符 
button 指定 一 个 容器 ， 可 以 包含 文本 ， 显 示 为 一 个 按钮 
cite 表示 引文 ， 以 斜体 显示 
code ， 以 等 宽 字体 显 才 
dfn 以 斜体 显示 
em ， 以 斜体 显示 
i 证 文 本 区 对 体 显示 
img 插入 图 像 或 视频 片段 
input 中 建 各 种 表单 输入 控件 
kbd 以 定 宽 字体 显示 文本 
label 为 页 面 上 的 其 答 
map 包含 客户 靖国 全 也 出 交 生 标 数据 
object 插入 对 象 
q 分 离 文本 中 的 引 语 
samp 表示 代码 范例 
select 表示 一 个 列表 框 或 者 一 个 下 拉 框 
small 指定 内 含 文本 要 以 比 当前 字体 稍 小 的 字体 显示 
span 指定 内 顽 文 本 容器 
strong 以 粗 体 显示 文本 
sub 说 明 内 含 文本 要 以 下 标的 形式 显示 ， 比 当前 字体 稍 小 
sup 说 明 内 含 文本 要 以 上 标的 形式 显示 ， 比 当前 字体 稍 小 
textarea 多 行文 本 输入 控件 
tt 以 固定 宽度 字体 显示 文本 
Var 定义 程序 变量 ， 通 常 以 斜体 显示 


9.2.2 CSS3 伸缩 盒 布局 


如 果 将 元 素 显 
能 够 简单 、 快 速 地 创建 一 个 具有 弹性 功能 的 布 


! 示 类 型 display 显 式 设置 为 “flex”， 则 对 象 作 为 弹性 伸缩 盒 显 示 。 伸 缩 盒 


局 ， 可 以 让 伸缩 使 内 的 元 素 在 伸缩 容器 内 进 


行 自由 扩展 和 收缩 ， 从 而 容易 地 调整 整个 布局 。 它 的 出 现 使 常见 的 布局 模式 例如 三 列 布 


局 ) 变 得 非常 简单 ， 目 前 已 经 得 到 了 所 有 浏览 器 的 支持 。 
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一 个 伸缩 盒 布 局 由 一 个 伸缩 盒 和 在 这 个 容器 里 的 伸缩 项 目 组 成 ， 当 一 个 标签 元 素 的 
display 属性 显 式 设置 为 ex 时 ， 元 素 会 变 为 伸缩 容器 ， 同 时 在 伸缩 容器 内 的 所 有 子 元 素 都 
会 自动 变 成 伸缩 项 目 ， 伸 缩 项 目的 float、clear 和 vertical-align 属性 将 失效 。 

伸缩 容器 有 两 根 轴 ， 即 水 平 的 主轴 和 垂直 的 交叉 轴 。 

表 9.13 列 出 了 CSS3 的 伸缩 盒 布局 属性 。 

表 9.13 CSS3 的 伸缩 盒 布 局 属性 


属 性 描 述 
flex 复合 属性 , 设置 伸缩 盒 的 伸缩 项 目 如 何 分 配 空间 ,包括 flex-grow、flex-shrink 和 flex-basis 
flex-grow 设置 伸缩 使 的 伸缩 项 目 扩展 比率 
flex-shrink 设置 伸缩 使 的 伸缩 项 目 收缩 比率 
flex-basis 设置 伸缩 盒 的 伸缩 项 目 伸缩 基准 值 


order 设置 伸缩 盒 的 伸缩 项 目 出 现 的 顺序 
align-self 设置 伸缩 使 的 伸缩 项 目 自 身 在 侧 轴 “《 纵 轴 ) 方向 上 的 对 齐 方式 
flex-flow 复合 属性 ， 设 置 伸缩 盒 的 伸缩 项 目 排列 方式 ， 包 括 flex-direction 和 flex-wrap 


flex-direction | 设置 伸缩 盒 的 伸缩 项 目 在 父 容器 中 的 位 置 ， 决 定 主轴 的 方向 〈 即 伸缩 项 目的 排列 方向 
flex-wrap 设置 伸缩 盒 的 伸缩 项 目 超出 父 容器 时 是 否 换行 

align-content | 设置 伸缩 盒 堆 登 伸缩 行 的 对 齐 方式 

align-items 设置 伸缩 使 的 伸缩 项 目 在 侧 轴 〈 纵 轴 ) 方向 上 的 对 齐 方式 

justify-content | 设置 伸缩 盒 的 伸缩 项 目 在 主轴 ( 横 轴 ) 方向 上 的 对 齐 方式 


@ 仲 缩 项 目 属性 

1) flex 属性 

flex 属性 用 来 设置 伸缩 盒 的 伸缩 项 目 如 何 分 配 空间 ， 是 flex-grow、flex-shrink 和 
flex-basis 的 简写 。 其 语法 如 下 : 


flex: nonel<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> 


其 默认 值 为 0 1 auto， 后 两 个 属性 可 选 。 该 属性 有 两 个 关键 字 ， 即 auto (1 1 auto) 和 
none (0 0 auto )。 

flex-grow 用 来 指定 扩展 比率 , 即 剩余 空间 是 正 值 时 此 伸缩 项 目 相 对 于 伸缩 容器 里 其 他 
伸缩 项 目 能 分 配 的 空间 比例 。 其 默认 值 为 0， 表 示 不 参与 剩余 空间 分 配 。 当 剩余 空间 是 正 
值 时 flex-shrink 值 不 起 作用 。 

flex-shrink 用 来 指定 收缩 比率 ， 即 剩余 空间 是 负 值 时 此 伸缩 项 目 相 对 于 伸缩 容器 里 其 
他 伸缩 项 目 能 收缩 的 空间 比例 。 在 收缩 的 时 候 收 缩 比率 会 以 伸缩 基准 值 加 权 ， 默 认 值 为 1。 
当 剩 余 空 间 是 负 值 时 flex-grow 值 不 起 作用 。 

flex-basis 用 来 指定 伸缩 基准 值 ， 即 在 根据 伸缩 比率 计算 出 剩余 空间 的 
分 布 之 前 伸缩 项 目 长 度 的 起 始 数值 。 如 果 所 有 伸缩 项 目的 基准 值 之 和 大 于 
剩余 空间 ， 则 会 根据 每 项 设置 的 基准 值 按 比 率 伸 缩 剩 余 空间 。 其 默认 值 为 
auto, 如 果 该 值 被 指定 为 auto, 则 伸缩 基准 值 的 计算 值 是 自身 的 width 设置 ， 
如 果 自 身 的 宽度 没有 定义 ， 则 长 度 取决 于 内 容 。 a 
圆 98 Css3(flex-shrink).html， 在 该 页 面 中 假设 有 一 个 伸缩 盒 flex， 视频 讲解 
里 面 有 3 个 伸缩 项 目 a、b、c。 


<div class="flex"> 
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<div class="a">a</div> 
<div class="b">b</div> 
<div class="c">c</div> 
</div> 
设 伸缩 盒 宽度 为 800px，a、b、c 伸缩 项 目 扩展 比率 分 别 为 1、2 和 3， 伸缩 项 目 收缩 
比率 分 别 为 1、2 和 3， 伸缩 基准 值 分 别 为 300px、200px 和 400px， 样 式 定义 如 下 : 
<style> 
.flex{display:flex;width:800px; height:200px;} 
-afflex:1 1 300px;background-color:#D2D2D2;} 
-bfflex:2 2 200px;background-color:#999999;} 
.Cc{flex:3 3 400px;background-color:#D2D2D2;} 
</style> 
整个 伸缩 盒 宽度 为 800px, 由 于 伸缩 项 目 设置 了 伸缩 基准 值 flex-basis, 加 起 来 为 900px， 
这 样 伸缩 盒 剩 余 空间 为 800px-900px 一 100px， 所 以 a、b、c 伸缩 项 目 必须 收缩 ， 需 要 分 别 
计算 a、b、c 伸缩 项 目 在 剩余 空间 100px 内 的 收缩 值 。 
由 于 设置 了 flex-shrink 收缩 比率 ， 首 先 要 进行 加 权 计算 : 
300px X 1+200px X 2+400px X 3=1900px 
然后 计算 a、b、c 伸缩 项 目的 收缩 值 : 
a 收缩 值 ，(300X 1/1900)X100 守 15.8px。 
b 收缩 值 : (200X2/1900)X100=:21.05px。 
c 收缩 值 : (400X3/1900)X10063.16px。 
最 后 ，a、b、c 伸缩 项 目的 实际 宽度 分 别 为 300px-15.8px=284.2px、200px-21.05px= 
178.9Spx、400px-63.16px=336.84px。 
在 Chrome 浏览 器 中 的 实际 显示 效果 如 图 9.17 所 示 。 


RD | Hements Console Sources Network Timeline profiles Application Security Audits 


les Computed Event listeners » 
> /head: er :hov . 


user agent stylesheet 
display: block; 
margin: > Bpx; 


9.17 Chrome 中 的 显示 示意 图 
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在 上 面 例子 的 基础 上 将 伸缩 盒 宽度 改 为 1200px。 

整个 伸缩 盒 宽度 为 1200px， 由 于 伸缩 项 目 设置 了 伸缩 基准 值 flex-basis， 加 起 来 为 
900px， 这 样 伸缩 盒 剩 余 空间 为 1200px-900px=300px， 所 以 a、b、c 伸缩 项 目 必须 扩展 ， 
需要 分 别 计算 a、b、c 伸缩 项 目 在 剩余 空间 300px 内 的 扩展 值 。 

计算 a、b、c 伸缩 项 目的 扩展 值 : 

a 扩 展 值 : (1/(1+2+3)) X300=50px。 

b 扩展 值 : (2/1+2+3))X300=100px。 

c 扩 展 值 : (3/(1+2+3))X300=150px。 

b、c 伸缩 项 目的 实际 宽度 分 别 为 300px+50px=350px、200px+100px=300px、 

400px+150px=550px。 

2) order 属性 

order 属性 定义 伸缩 项 目的 排列 顺序 ， 数 值 越 小 ， 排 列 越 靠 前 ， 其 默认 为 0。 

3) align-self 属性 

align-self 属性 允许 单个 伸缩 项 目 自身 可 以 有 与 其 他 伸缩 项 目 不 一 样 的 
对 齐 方式 ， 其 默认 值 为 aato， 表 示 继 承 父 元 素 的 align-items 属性 ， 其 他 值 
与 align-items 属性 完全 一 致 。 


贺 9.9 CSS3(flex)html， 说 明了 flex 属性 的 用 法 ， 效 果 如 图 9.18 所 示 。 ”视频 讲解 


加 ” 四 
半 。 2/6, 遇 训 ， 


图 9.18 ”CSS3(flex).html 示意 图 


源 代码 如 下 : 


<head> 
<title>CSS3 伸缩 盒 flex 属性 </title> 
<style> 
/* 设 置 .article 元 素 的 显示 类 型 为 flex (伸缩 盒 )， 最 大 宽度 为 960px， 最 小 宽度 为 
260px， 宽 度 为 100%*/ 
.article{ 
display:-webkit-box;display:-ms-flexbox; 
display:flex; 
width:100%;max-width:960px; min-width:260px;margin: 10px auto; 
height:80px; 
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1 
.nav{background:rgba (0, 0,0,0.4) ;border: lpx solid #FF0000; margin: lpx;} 
.Section{background:rgba (0, 0, 0,0.3) ;border: 1px solid #00FF00; margin: 1px; } 
.aside{background:rgba(0, 0,0,0.2) ;border: lpx solid #0000FF; margin: lpx;} 
/* 给 #articlel 分 配 空间 : #navl 占 1/6，#sectionl 占 3/6， 即 一 半 , #asidel 占 
2/6， 即 1/3*+/ 
#navit{ 
-webkit-box-flex:1;-ms-flex:1; 
flex:1; 
} 
#sectionl{ 
—webkit-box-flex:3;-ms-flex:3; 
flex:3; 
} 
#asidelf 
-webkit-box-flex:27-ms-flex:27 
flex:2; 
} 
/# 设 置 fnav2 区 域 的 排列 顺序 在 后 面 */ 
#nav21{ 
—webkit-box-flex:1;-ms-flex:1; 
flex:1; 
-webkit-box-ordinal-group: 2;-ms-flex-order: 1; 
order: 1; 
上 
#section21{ 
—webkit-box-flex:1;-ms-flex:1; 
flex:1; 
} 
#aside2{ 
—webkit-box-flex:1;-ms-flex:1; 
flex:1; 
. 
/* 设 置 #nav3 区 域 不 收缩 */ 
#nav3{ 
—webkit-box-flex:1;-ms-flex:1 0 200px; 
flex:1 0 200px; 
} 
/* 设 置 #section3 和 #aside3 区 域 按 2 倍 比率 收缩 */ 
#section3{ 
-webkit-box-flex:17;-ms-flex:1 2 200px; 
flex:1 2 200px; 
} 
#aside3{ 
-webkit-box-flex:1;-ms-flex:1 2 200px; 
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flex:l 2 200pX>» 
’ 

</style> 
</head> 
<body> 
<article class="article" id="articlel"> 

<nav class="nav"” id="navl"> 导 航 区 域 占 1/6。</nav> 

<section class="section" id="sectionl"> 内 容 区 域 占 3/6， 即 一 半 。</section> 

<aside class="aside" id="asidel"> 边 栏 区 域 占 2/6， 即 1/3。</aside> 
</article> 


<article class="article" id="article2"> 
<nav class="nav" id="nav2"> 导 航 区 域 排列 顺序 在 后 面 </nav> 
<section class="section" id="section2"> 内 容 </section> 
<aside class="aside" id="aside2"> 边 栏 </aside> 
</article> 
<article class="article" id="article3"> 
<nav class="nav"” id="nav3"> 导 航 区 域 不 收缩 </nav> 
<section class="section" id="section3"> 内 容 区 域 按 2 倍 比率 收缩 </section> 
<aside class="aside" id="aside3"> 边 栏 区 域 按 2 倍 比率 收缩 </aside> 
</article> 
</body> 


@ 仲 缩 容 器 属性 
1) flex-flow 属性 
flex-flow 属性 是 flex-direction 属性 和 flex-wrap 属性 的 简写 形式 ,默认 值 为 row nowrap。 
其 语法 如 下 : 
flex-flow: <'flex-direction'> || <'flex-wrap'> 
flex-direction 属性 设置 伸缩 项 目 在 主轴 上 的 排列 方向 ， 它 有 4 个 值 ， 见 表 9.14。 
表 9.14 flex-direction 属性 值 
描 述 
默认 值 ， 主 轴 为 水 平方 向 ， 起 点 在 左 端 
主轴 为 水 平方 向 ， 起 点 在 右 端 
主轴 为 垂直 方向 ， 起 点 在 上 沿 
主轴 为 垂直 方向 ， 起 点 在 下 沿 


flex-wrap 属性 设置 伸缩 容器 是 单行 还 是 多 行 , 在 默认 情况 下 , 伸缩 项 目 都 排 在 一 行 上 ， 
它 有 3 个 值 ， 见 表 9.15。 


值 


TOW 


TOW-IeVeTSe 


column 


column-reverse 


表 9.15 flex-wrap 属性 值 


值 描 述 
nowrap | 默认 值 ， 不 换行 
wrap 换行 ， 第 1 行 在 上 方 


换行 ， 第 1 行 在 下 方 
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[ 圆 9.10 Css3(flex-flow) html， 说 明了 flex-flow 属性 的 用 法 ， 如 图 9.19 所 示 。 


视频 讲解 


图 9.19 CSS3(flex-flow).html 示意 图 


源 代码 如 下 : 


<head> 
<title>CSS3 伸缩 盒 flex-flow 属性 </title> 
<style> 
.articlel 
display:-webkit-box;display:-ms-flexbox; 
display:flex;width:100%;max-width:960px; min-width:260px;margin: 
10px auto;height:100px; 
} 
.nav{background:rgba(0,0,0,0.4);} 
.Section{background:rgba (0,0,0,0.3);} 
.aside{background:rgba(0,0,0,0.2);; 
/* 设 置 #articlel 里 的 子 元 素 伸缩 项 目 在 主轴 上 为 水 平方 向 ， 起 点 在 右 端 */ 
#articlelf{ 
-webkit-box-orient: horizontal;-webkit-box-direction: reverse; 
-ms-flex-flow: row-reverse; 
flex-flow: row-reverse; 


} 

/* 设 置 #article2 里 的 子 元 素 伸 缩 项 目 在 主轴 上 为 水 平方 向 ,起 点 在 左 端 , 当 #article2 

宽度 不 够 时 换行 ， 第 1 项 在 上 方 */ 

#article2{ 
-webkit-box-orient:horizontal;-webkit-box-direction:normal; 
-ms-flex-flow:row wrap; 
flex-flow:row wrap; 

} 

#nav2{ 

—webkit-box-flex:1;-ms-flex:1 1 260px; 
flex:1 1 260px; 

下 

#section2{ 

—webkit-box-flex:1;-ms-flex:1 1 260px; 
flex:1 1 260px; 

上 

#aside2{ 

—webkit-box-flex:1;-ms-flex:1 1 260px; 
E> te. 
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</style> 
</head> 
<body> 
<article class="article" id="articlel"> 
<nav class="nav"” id="navl"> 导 航 </nav> 
<section class="section" id="sectionl"> 内 容 </section> 
<aside class="aside" id="asidel"> 边 栏 </aside> 
</article> 
<article class="article" id="article2"> 
<nav class="nav" id="nav2"> 导 航 </nav> 
<section class="section" id="section2"> 内 容 </section> 
<aside class="aside" id="aside2"> 边 栏 </aside> 
</article> 
</body> 


2) justify-content 属性 
justify-content 属性 定义 了 伸缩 项 目 在 主轴 上 的 对 齐 方式 ， 它 有 5 个 值 (具体 对 齐 方 式 
与 轴 的 方向 有 关 ， 假 设 主轴 为 从 左 到 右 )， 见 表 9.16。 
表 9.16 justify-content 属性 值 


值 描 述 
flex-start 默认 值 ， 左 对 齐 
flex-end 右 对 齐 


居中 
两 端 对 齐 ， 伸 缩 项 目 之 间 间 隔 相 等 
伸缩 项 目 两 侧 间 隔 相 等 。 伸 缩 项 目 之 间 的 间隔 比 伸缩 项 目 与 边框 的 间隔 大 一 倍 


center 


space-between 


space-around 


加 ?1 CSS3(justify-content).html， 说 明了 justify-content 属性 的 用 法 ， 如 图 9.20 
所 示 。 
源 代码 如 下 : 


<head> 罩 目 目 


<title>CSS3 伸缩 盒 justify- 
content 属性 </tit1le> 
<style> 


flex-start 


flex-end 


视频 讲解 

box 

display: -webkit-box; 目 目 目 

display: -ms-flexbox; En 

display: flex; 图 图 

width:100%;max-width:9 space-around 

60px;min-width:260px; 国 国 [| 

margin: 1l0px 0; height: 

50px; 图 9.20 ”CSS3Gustify-content).html 示意 图 
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border-radius: 5px;background-color:rgba(0,0,0,0.2); 
} 
-box div { 
margin: 5px;padding: 10px;text-align: center; 
border-radius: 5px; background: rgba(0,0,0,0.4); 
3 
#boxl { 
—webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; 
4 
#box2 { 
—webkit-box-pack: end; -ms-flex-pack: end; 
justify-content: flex-end; 
} 
#box3 { 
—webkit-box-pack: center; -ms-flex-pack: center; 
justify-content: center; 
} 
#box4 { 
-webkit-box-pack: justify; -ms-flex-pack: justify; 
justify-content: space-between; 
} 
#box5 { 
-ms-flex-pack: distribute; 
justify-content: space-around; 
} 
</style> 
</head> 
<body> 
<h2>flex-start</h2> 
<div id="boxl" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</div> 
<h2>flex-end</h2> 
<div id="box2" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</div> 
<h2>center</h2> 
<div id="box3" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</div> 
<h2>space-between</h2> 
<div id="box4" class="box"> 
<div>1</div> 
<div>2</div> 
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<div>3</div> 

</div> 

<h2>space-around</h2> 

<div id="box5" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 

</div> 

</body> 


3) align-items 属性 
align-items 属性 定义 伸缩 项 目 在 交叉 轴 上 如 何 对 齐 ， 它 有 5 个 值 (具体 的 对 齐 方式 与 
交叉 轴 的 方向 有 关 ， 假 设 交 叉 轴 从 上 到 下 )， 见 表 9.17。 
表 9.17 align-items 属性 值 
值 描 述 
flex-start | 默认 值 ， 交 叉 轴 的 起 点 对 齐 
交叉 轴 的 终点 对 齐 
交叉 轴 的 中 点 对 齐 
伸缩 项 目的 第 一 行文 字 的 基线 对 齐 
默认 值 ， 如 果 伸缩 项 目 未 设置 高 度 或 设 为 auto， 将 占 满 整个 容器 的 高 度 


flex-end 


center 


baseline 
stretch 


加 ?12 CSS3(align-items).html， 说 明了 align- 
items 属性 的 用 法 ， 如 图 9.21 所 示 。 
源 代码 如 下 : 


<head> 
<title>CSS3 伸缩 盒 align-items 属性 </title> 视频 讲解 
<style> flex-start 
.box{ [| 辆 目 
display: —webkit-box;display: 
-ms-flexbox; i 
display: flex; 
width:100%;max-width:960px; 四 目 目 
min-width:260px;margin: 10px 07 center 
height:100px; 
border-radius: Spzx;background-— @ 国 目 
color:rgba(0,0,0,0.2); eR 
E 
.box divf 上 
margin: Spx;padding: 10px;text-— 
align: center; 2 
border-radius: Spx; background: 目 
rgba(0,0,0,0.4); 
; 图 9.21 CSS3(align-items).html 示意 图 


-box .dl{padding-top: 10px;} 
.box .d2{padding-top: 20px;} 
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-box .d3{padding-top: 30px;} 

#boxl{ 
—webkit-box-align:start;-ms-flex-align:start; 
align-items:flex-start; 

| 

#box21 
—webkit-box-align:end;-ms-flex-align:end; 
align-items:flex-end; 

} 

#box31{ 
-webkit-box-align:center;-ms-flex-align:center; 
align-items:center; 

》 

#box4{ 
-webkit-box-align:baseline;-ms-flex-align:baseline; 
align-items:baseline; 

L 

#box5{ 
—webkit-box-align:stretch;-ms-flex-align:stretch; 
align-items:stretch; 

} 

</style> 

</head> 

<body> 

<h2>flex-start</h2> 

<div id="boxl" class="box"> 
<div class="dl">1</div> 
<div class="d2">2</div> 
<div class="d3">3</div> 

</div> 

<h2>flex-end</h2> 

<div id="box2" class="box"> 
<div class="d1l">1</div> 
<div class="d2">2</div> 
<div class="d3">3</div> 

</div> 

<h2>center</h2> 

<div id="box3" class="box"> 
<div class="d1l">1</div> 
<div class="d2">2</div> 
<div class="d3">3</div> 

</div> 

<h2>baseline</h2> 

<div id="box4" class="box"> 
<div class="dl">1</div> 
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<div class="d2">2</div> 
<div class="d3">3</div> 

</div> 

<h2>stretch</h2> 

<div id="box5" class="box"> 
<div class="dl">1</div> 
<div class="d2">2</div> 
<div class="d3">3</div> 

</div> 

</body> 


4) align-content 属性 
align-content 属性 定义 了 多 根 轴线 (多 行 ) 的 对 齐 方 式 。 如 果 伸 缩 项 目 只 有 一 根 轴线 ， 
该 属性 不 起 作用 ， 它 有 6 个 值 ， 见 表 9.18。 


表 9.18 align-content 属性 值 


值 描 述 
flex-start 与 交叉 轴 的 起 点 对 齐 
flex-end 与 交叉 轴 的 终点 对 齐 
center 与 交叉 轴 的 中 点 对 齐 
space-between 与 交叉 轴 的 两 端 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 
space-around 每 根 轴 线 两 侧 的 间隔 相等 。 轴 线 之 间 的 间隔 比 轴线 与 边框 的 间隔 大 一 倍 
stretch 默认 值 ， 轴 线 占 满 整个 交叉 轴 


?3 CSS3(align-content).html, 说 明了 align-content 属性 的 用 法 ， 如 图 9.22 所 示 。 


flex-start space-between 


flex-end space-around 


center stretch 


图 9.22 CSS3(align-content).html 示 
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源 代 码 如 下 : 


<head> 
<title>css3 伸缩 盒 align-content 属性 </title> 
<style> 
.boxt{ 
display:-webkit-box;display:-ms-flexbox; 
display:flex; 
-ms-flex-flow: wrap; 
flex-flow: wrap; 
width:160px;height:160px;border-radius:5px;background-color: 
rgba(0,0,0,0.3);} 
-box div{margin: 5px;padding:10px;border-radius:5px;background: 
rgba (0,0,0,0.4);text-align:center;} 
#boxl{ 
-ms-flex-line-pack: start; 
align-content:flex-start; 
} 
#box21{ 
-ms-flex-line-pack:end; 
align-content:flex-end; 
} 
#box31{ 
-ms-flex-line-pack:center; 
align-content:center; 
} 
#box4{ 
-ms-flex-line-pack:justify; 
align-content:space-between; 
, 
#box5{-ms-flex-line-pack:distribute; 
align-content:space-around; 
#box6{ 
-ms-flex-line-pack:stretch; 
align-content:stretch; 
} 
</style> 
</head> 
<body> 
<h2>flex-start</h2> 
<div id="boxl" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
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<div>4</div> 
<div>5</div> 

</div> 

<h2>flex-end</h2> 

<div id="box2" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

</div> 

<h2>center</h2> 

<div id="box3" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

</div> 

<h2>space-between</h2> 

<div id="box4" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

</div> 

<h2>space-around</h2> 

<div id="box5" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

</div> 

<h2>stretch</h2> 

<div id="box6" class="box"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

</div> 

</body> 
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9.2.3 CSS 浮动 


元 素 在 默认 情况 下 是 不 浮动 的 ， 但 可 以 用 CSS 定义 为 浮动 。 
@ 定义 浮动 
浮动 元 素 可 以 向 左 或 向 右 移 动 ， 直 到 它 的 外 边 距 边缘 碰 到 包含 元 素 内 边 距 边缘 或 男 一 
个 浮动 元 素 的 外 边 距 边缘 为 止 ， 浮 动 元 素 不 在 文档 流 中 ， 在 CSS 中 通过 float 属性 实现 元 
素 的 浮动 。float 属性 定义 元 素 在 哪个 方向 浮动 ， 任 何 元 素 都 可 以 浮动 ， 浮 动 元 素 会 变 成 一 
个 块 状元 素 。 表 9.19 列 出 了 float 属性 值 。 
表 9.19 float 属性 值 


值 描 述 
left | 元 素 向 左 浮动 
right 元 素 向 右 浮动 


默认 值 ， 元 素 不 浮动 ， 显 示 元 素 在 文本 中 出 现 的 位 置 


id="include">， 其 中 有 3 个 <div>， 在 没有 定义 浮动 样式 前 显示 的 文档 流 是 
符合 块 状元 素 特征 的 ， 如 图 9.23 所 示 。 
源 代码 如 下 : 


<head> I 
<title>float 浮动 </title> | | 

<style> 也 3 

div divi 
border:lpx solid #F00; 际 | 
width:80px;height:60px; | 


margin:2px; 


} 图 9.23 CSS(float).html 示意 图 1 
#include{ 
border:1lpx #00F solid;height:194px;width:258px;} 
</style> 
</head> 
<body> 


<div id="include"> 
<div id="div1"> 块 1</div> 
<div id="div2"> 块 2</div> 
<div id="div3"> 块 3</div> 

</div> 

</body> 


在 内 部 样式 表 中 添加 样式 ， 让 <div id="div1"> 向 右 浮动 ， 源 代码 如 下 : 

#divl{float:right;} 

当 块 1 向 右 浮动 时 ， 它 脱 高 文档 流 并 且 向 右 移动 ， 直 到 它 的 外 边 距 右边 缘 碰 到 包含 元 
入 全 | 
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素 的 内 边 距 右 边缘 ， 如 图 9.24 所 示 。 

改变 样式 ， 让 <div id="div1"> 向 左 浮动 ， 源 代码 如 下 : 

#divl{float:left;} 

当 块 1 向 左 浮动 时 ， 它 脱离 文档 流 并 且 向 左 移动 ， 直 到 它 的 外 边 距 左 边缘 碰 到 包含 元 
素 的 内 边 距 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ， 块 2 占据 了 块 1 原先 
的 位 置 ， 块 1 在 块 2 的 上 面 浮动 ， 履 盖 住 了 块 2， 感 觉 到 块 2 消失 了 ， 如 图 9.25 所 示 。 


2 加 喘 1 
决 3 添 3 
图 9.24 CSS(float).html 示意 图 2 图 9.25 CSS(float).html 示意 图 3 


改变 样式 ， 让 3 个 块 同时 向 左 浮动 ， 源 代码 如 下 : 

div div{float:left;} 

如 果 把 3 个 块 都 向 左 浮动 , 那么 块 1 向 左 浮动 直到 而 到  - 
包含 元 素 ,， 另 外 两 个 块 向 左 浮动 直到 碰 到 前 一 个 浮动 块 的 外 时 加 | : 
边 距 ， 如 图 9.26 所 示 。 

减少 包含 元 素 的 宽度 , 改动 <div id="include"> 样 式 如 下 : 


#include{ 

border:1lpx #00F solid; 

height:194px;width:256px; 图 9.26 CSS(float).html 示意 图 4 
} 


如 果 包 含 元 素 太 窗 ， 无 法 容纳 水 平 排列 的 3 个 浮动 元 素 ， 那 么 其 他 浮动 块 向 下 移动 ， 
直到 有 足够 的 空间 ， 如 图 9.27 所 示 。 

添加 样式 ， 让 <div id="div1"> 高 度 增加 ， 源 代码 如 下 : 

#divl {height:80px;} 

如 果 浮 动 元 素 的 高 度 不 同 ， 那 么 当 它 们 向 下 移动 时 可 能 被 其 他 浮动 元 素 “ 挡 住 ”， 如 
图 9.28 所 示 。 


陕 1 陕 2 1 决 2 
陕 3 决 3 
图 9.27 CSS(float).html 示意 图 5 图 9.28 ”CSS(float).html 示意 图 6 
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四 主动 清除 
clear 属性 规定 元 素 的 哪 一 侧 不 允许 有 其 他 浮动 元 素 ，clear 属性 值 见 表 9.20。 
表 9.20 clear 属性 值 
值 描 述 

left 
Tight 
both 
none | 默认 值 ， 允 许 浮动 元 素 出 现在 两 侧 


圆 9.15 Css(clear-1).html， 说 明 clear 属性 的 用 法 ， 如 图 9.29 所 示 。 


视频 讲解 


图 9.29 CSS(clear-1).html 示意 图 


源 代码 如 下 : 
<head> 
<title>clear 清除 </title> 
<style> 
span{width:110px;height:50px;} 
#spanl{ 
float:left; 
border:solid blue 3px; 
} 
#span2{ 
float:left; 
border:solid red 3px; 
clear:1left; /* 清 除 左 侧 浮动 */ 
} 
#span3{float:left;border:solid green 3px;} 
</style> 
</head> 
<body> 
<span id="spanl">spanl 元 素 浮动 </ span> <span id="span2">span2 元 素 浮动 </span> 
<span id="span3">span3 元 素 浮动 </span> 
</body> 
该 清除 只 能 用 于 浮动 元 素 的 清除 , 当 一 个 浮动 元 素 定义 了 clear 属性 时 不 会 对 其 前 面 和 
后 面 的 元 素 产 生 影响 。 
[ 圆 9.16 CSS(clear2)html， 在 CSS(clear-1).html 的 基础 上 修改 第 2 个 span 的 样式 ， 
变 为 清除 右 侧 浮动 ， 如 图 9.30 所 示 。 
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图 9.30 CSS(clear-2).html 示意 图 


样式 如 下 : 


#span2 { 
float:lefty 
border:solid red 3px; 


clear:right; /* 清 除 右 侧 浮 动 */ 

} 

第 2 个 span 元 素 定义 了 clear:right， 由 于 它 的 左 、 右 没有 向 右 浮动 的 元 素 ， 所 以 它 依 
然 与 第 1 个 span 元 素 并 列 显示 ， 同 时 第 3 个 span 元 素 不 会 受 任 何 影响 。 

浮动 清除 不 仅 针对 相 邻 浮动 元 素 , 只 要 在 水 平方 向 上 有 
浮动 元 素 都 会 实现 清除 操作 。 

贺 ".17 CSS(clear-3).html， 在 CSS(clear-2).html 的 基 eT 
础 上 清除 第 2 个 span 元 素 向 左 浮动 ， 为 第 3 个 span 元 素 增 | 
加 清除 左 侧 浮 动 。 显 示 效 果 如 图 9.31 所 示 。 

样式 如 下 : 


#span2{border:solid red 3px;} 


Epani 元 系 浮 动 下 pan2 元 素 沫 动 


图 9.31 CSS(clear-3).html 示意 图 


#span3{ 
float:left;border:solid green 3px; 
clear:1left; /* 清 除 左 侧 浮动 */ 
} 
虽然 第 1 个 span 元 素 与 第 3 个 span 元 素 并 不 相 邻 ， 中 间隔 着 第 2 个 span 元 素 ， 但 在 
显示 时 它们 依然 水 平 相 邻 ， 所 以 当 定义 第 3 个 span 元 素 清除 属性 时 自动 在 第 1 个 span 元 
素 底 部 显示 。 


9.2.4 可见 与 溢出 


@ visibility 属性 
visibility 属性 规定 元 素 是 否 可 见 。 表 9.21 列 出 了 visibility 属性 值 。 
表 9.21 visibility 属性 值 


值 描 述 
visible ”| 默认 值 。 元 素 是 可 见 的 
hidden ”| 元 素 不 可 见 


当 在 表格 元 素 中 使 用 时 ， 此 值 可 删除 一 行 或 一 列 ， 不 会 影响 表格 的 布局 ， 被 行 或 列 占据 的 
“Pe | 空间 会 留 给 其 他 内 容 使 用 。 如 果 此 值 被 用 在 其 他 的 元 素 上 ， 同 hidden 


即使 不 可 见 的 元 素 也 会 占据 页 面 上 所 在 位 置 的 空间 ， 用 户 可 以 使 用 display 属性 来 创 
建 不 占据 页 面 空间 的 不 可 见 元 素 。 
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例如 使 h2 元 素 不 可 见 : 
h2{visibility:hidden;} 
四 溢出 
overflow 属性 设置 元 素 内 容 溢出 时 的 处 理 方式 ， 也 可 以 使 用 overflow-x 和 overflow-y 
分 别 设置 横向 和 纵向 内 容 溢 出 时 的 处 理 方式 。 表 9.22 列 出 了 overflow 属性 值 。 
表 9.22 overflow 属性 值 


值 描 述 


visible | 默认 值 。 溢 出 内 容 不 做 处 理 ， 内 容 可 能 会 超出 容器 
hidden ”| ”隐藏 游 出 内 容 
scroll | 隐藏 溢出 内 容 ， 溢 出 内 容 将 以 拖 动 滚动 条 的 方式 呈现 


auto 当 内 容 没 有 溢出 时 不 出 现 滚动 条 ， 当 内 容 滋 出 时 出 现 滚动 条 ， 按 需 出 现 滚动 条 


图 9.32 CSS3(overflow) 示 意图 


源 代码 如 下 : 
<head> 
<title>overflow 溢出 </title> 
<style> 
div {background-color:hsla(120,60%,80%,1); width:150px;height: 
150px;overflow: scroll;} 
</style> 
</head> 
<body> 
<div> 
overflow 设置 元 素 内 容 涪 出 时 处 理 方式 ， 也 可 以 使 用 overflow-x 和 overflow-y 分 别 设置 横 
向 和 纵向 内 容 溢 出 时 处 理 方式 。 默 认 值 是 visible。 
</div> 
</body> 
@ 光标 显示 类 型 
cursor 属性 规定 要 显示 的 光标 的 类 型 。 该 属性 定义 了 鼠标 指针 放 在 一 个 元 素 边界 范围 
内 时 所 用 的 光标 形状 。 表 9.23 列 出 了 常用 光标 的 类 型 。 
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表 9.23 cursor 属性 值 


值 描 述 
ul 使 用 自 定义 光标 的 URL 
default 光标 〈 通 常 是 一 个 箭头 ) 
auto 。 浏 览 器 设置 的 光标 
crosshair 4 
pointer 未 链 毛 的 指 什 (一 只 手 ) 
move 指示 某 对 象 可 被 移动 
e-resize 指示 矩形 框 的 边缘 可 被 向 右 〈 东 ) 移动 
ne-resize 此 示 和 托 形 框 的 边缘 可 被 向 上 及 向 右 移动 〈 北 / 东 ) 
nw-resize 指示 和 托 形 框 的 边缘 可 被 向 上 及 向 左 移动 〈 北 / 西 ) 
n-resize 指示 矩形 框 的 边缘 可 被 向 上 〈 北 ) 移动 
se-resize 指示 矩形 框 的 边缘 可 被 向 下 及 向 右 移动 〈 南 / 东 ) 
SW-TesiZze 指示 矩形 框 的 边缘 可 被 向 下 及 向 左 移动 〈 南 / 西 ) 
s-resize 指示 矩形 框 的 边缘 可 被 向 下 移动 〈 南 ) 
w-resize 背 示 矩形 框 的 边缘 可 被 向 左 移动 〈 西 ) 
text :文本 
wait a 
help 


下 面 的 样式 使 用 了 一 些 不 同 的 光标 指针 : 


span.crosshair{cursor:crosshair;} 
span.help{cursor:help;} 
span.wait{cursor:wait;} 


9.3 CSS 定位 


CSS 定位 属性 允许 用 户 对 元 素 进行 定位 。 表 9.24 列 出 了 CSS 的 定位 属性 。 
表 9.24 CSS 定位 属性 


属 性 描 述 

position 规定 元 素 的 定位 类 型 

top 定义 了 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 移 
Tight 定义 了 定位 元 素 的 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 偏 移 
bottom J 下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 


left 的 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 
z-index 设置 元 素 的 淮 吉 顺序 


9.3.1 position 属性 


position 属性 规定 元 素 的 定位 类 型 ，position 属性 值 见 表 9.25。 这 个 属性 定义 建立 元 素 
布局 所 用 的 定位 机 制 ， 任 何 元 素 都 可 以 定位 。 


| 176 


第 9 章 页 面 布局 定位 


表 9.25 position 属性 值 


值 描 述 
bsoh 绝对 定位 ， 相 对 于 最 近 定 位 的 祖先 元 素 进行 定位 ， 元 素 的 定位 位 置 通过 left、top、 
0 Tight 和 bottom 属性 值 确定 
固定 定位 , 相对 于 浏览 器 窗口 进行 定位 ,元 素 的 定位 位 置 通过 left\top \right 和 bottom 
fixed rips 
属性 值 确 定 
a 相对 定位 ,相对 于 其 正常 位 置 进行 定位 ,元 素 的 定位 位 置 通过 left、top、right 和 bottom 
relative i 
属性 值 确 定 
i 默认 值 .没有 定位 , 元 素 出 现在 正常 的 流 中 , 忽略 top、bottom、 left、 right 或 者 z-index 


声明 


@ CSS 相对 定位 
设置 为 相对 定位 的 元 素 会 相对 于 这 个 元 素 的 起 点 偏 移 某 个 距离 ， 元 素 


仍然 保持 其 未 定位 前 的 形状 ， 这 个 元 素 原本 所 占 的 空间 仍 保留 。 
贺 "19 CSS(position-relative).html， 在 该 页 面 中 定义 了 一 个 <div>， 
纪念 3 个 块 , 将 id="box-relative" 块 设 为 相对 定位 , 如 果 将 top 设置 为 20px， 


[Dr 


那么 这 个 块 会 在 原 位 置 向 下 移动 20 像素 ， 如 果 将 left 设置 为 30 像素 ， 那 
么 这 个 块 会 在 原 位 置 向 右 移动 30 像素 ， 如 图 9.33 所 示 。 


源 代码 如 下 : 


<head> 


视频 讲解 


图 9.33 ”CSS(position-relative).html 示意 图 


<title> 相 对 定位 </title> 


<style> 
div divt{ 


border:lpx solid #F00; 
width:160px;height:100px;float:left; 


} 


#box-relative{ 


position:relative; 


left:30px;top:20px;} 


</style> 
</head> 


<body> 
<div> 


<div> 块 1</div> 
<div id="box-relative"> 块 2</div> 
<div> 块 3</div> 

</div></body> 
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@ CSS 绝对 定位 
设置 为 绝对 定位 的 元 素 从 文档 流 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 〈 第 2 版 ) 


bh 完全 删除 ， 元 素 的 位 置 与 文档 流 无 关 ， 不 占据 文档 


流 空间 ， 元 素 定位 后 变 成 一 个 块 状元 素 ， 元 素 的 位 置 相对 于 最 近 的 已 定位 的 祖先 元 素 ， 如 
果 元 素 没有 已 定位 的 祖先 元 素 ， 那 么 它 的 位 置 相 对 于 body。 
[ 圆 9.20 Css(position-absolute).html， 在 该 页 面 中 定义 了 <div>， 包含 3 个 块 ， 如果 将 


jd="box-absolute" 块 设 为 绝对 定位 ， 那 么 这 个 块 会 脱离 文档 流 ， 相 对 于 body 元 素 定 位 ， 因 


为 这 个 元 素 没有 已 定位 的 祖先 元 素 ， 如 图 9.34 所 示 。 


图 9.34 CSS(position-absolute).html 示意 图 视频 讲解 
源 代码 如 下 : 
<head> 
<title> 绝 对 定位 </title> 
<style> 
div div{ 


border:lpx solid #F00;width:160px;height:100px;float:left; 


} 

#box-absolute{ 
position:absolute; 
left:30px;top:30px; 
background-color:#FC0;} 

</style> 

</head> 

<body> 

<div> 

<qdiv> 块 1</div> 


<div id="box-absolute"> 块 2</div> 


<div> 块 3</div> 
</div></body> 


对 于 定位 ， 用 户 要 理解 每 种 定位 的 意义 : 相对 定位 是 “相对 于 ”元 素 在 文档 中 的 初始 
位 置 ， 而 绝对 定位 是 “相对 于 ”最 近 的 已 定位 祖先 元 素 ， 如 果 不 存在 已 定位 的 祖先 元 素 ， 


那么 最 近 的 已 定位 祖先 元 素 是 body。 
@ 包含 央 


包含 块 是 标准 布局 中 的 一 个 重要 概念 ， 它 是 绝对 定位 的 基础 ， 包 含 块 是 为 绝对 定位 元 


素 提供 坐标 偏 移 和 显示 范围 的 参照 物 。 
绝对 定位 的 元 素 都 是 根据 body 来 确定 


在 默认 状态 下 ，body 元 素 是 一 个 大 的 包含 块 ， 所 有 
自己 所 处 的 位 置 的 。 但 是 如 果 定 义 了 包含 元 素 ( 指 元 


素 内 容 包含 其 他 元 素 ) 为 包含 块 ， 对 于 被 包含 的 绝对 定位 元 素来 说 ， 就 会 根据 最 近 的 包含 


块 来 决定 自己 的 显示 位 置 。 
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用 户 可 以 用 position 属性 来 定义 任意 包含 元 素 成 为 包含 块 , position 属性 的 有 效 取 值 包 
括 absolute、fixed 和 relative。 

圆 "21 CSS(include blocl) html， 在 该 页 面 中 定义 了 包含 元 素 <div id="a"> 和 <div 
id="b">，<div id="c"> 和 <div id="d"> 是 被 包含 元 素 ， 将 <div id="b"> 定 义 为 相对 定位 ， 确 定 
它 为 包含 块 ， 如 图 9.35 所 示 。 


3) include block - orilla Firefoz 


国 iaawas iock 


/| la 51 


1@ 天- 时 cookie:- 无 css 博 误 - 国 表单 - 图 


图 9.35 ”CSS(include.block).html 示意 图 


源 代码 如 下 : 
<head> 
<title> 包 含 块 </title> 
<style> 
/* 定义 包含 元 素 的 共同 属性 */ 
#a, #b{ 
width:100px;height:100px;float:left; 
margin-top:10px; /* 拉 开 与 窗口 顶部 的 距离 */ 
border:solid 1px red; /* 定义 红色 边框 线 ， 以 便于 识别 */ 
} 
/* 定义 包含 元 素 b 为 相对 定位 ， 确 定 它 为 包含 块 */ 
#b{ 
position:relative;margin-left:10px; /* 拉 开 与 b 包含 元 素 的 距离 */} 
/* 定义 被 包含 元 素 绝对 定位 ， 并 进行 偏 移 */ 
#c, #d{ 
width:50%;height:50%; 
position:absolute; 
left:50%; /* 与 包含 块 左 侧 边 框 的 距离 为 50% */ 
top:50%; /* 与 包含 块 顶部 边框 的 距离 为 508 */ 
#c{background-color:#0F0;} 
#d{background-color:#00F;} 
</style> 
</head> 
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<body> 
<div id="a"> 

<div id="c"></div> 
</div> 
<div id="b"> 

<div id="d"></div> 
</div></body> 


在 一 般 情况 下 ， 包 含 块 是 绝对 定位 元 素 的 相 邻 的 父 级 元 素 。 

绝对 定位 的 元 素 应 该 显 式 声明 定位 方式 、 元 素 的 宽度 和 高 度 ， 绝 对 定位 元 素 本 身 是 一 
个 包含 块 ， 一 个 绝对 定位 元 素 将 为 它 包 含 的 任何 元 素 建立 一 个 包含 块 。 

贺 "2 CSS(include).html， 在 该 页 面 中 定义 了 3 个 不 同 的 包含 元 素 ， 观 察 不 同 包含 
元 素 与 它们 的 子 元 素 的 位 置 关系 ， 如 图 9.36 所 示 。 


图 9.36 CSS(include).html 示意 图 


源 代码 如 下 : 


<head> 

<title> 包 含 元 素 </title> 

<style> 

#containl,#contain2,#contain3{ 
width:380px;height:120px; 
border:solid lpx #666; 

} 

#contain2{/* 定 义 第 2 个 div 元 素 为 绝对 定位 */ 
position:absolute; left:120px;top: 60px;background:#F08080; 

} 

#contain3{/* 定 义 第 3 个 div 元 素 为 浮动 >*/ 
float:left;background:#D2B48C; 

3 

#contain2 div{color:#993399;border:solid lpx #FF0000;} 

#sub-div1{/* 定 义 绝对 定位 包含 块 内 的 第 1 个 元 素 为 绝对 定位 >*/ 
width:80px;height:80px; position:absolute; 
right:10px;bottom:10px; background:#FEF68F; 

} 

#sub-div2{/* 定 义 绝对 定位 包含 块 内 的 第 2 个 元 素 为 浮动 布局 */ 
width:80px;height:80px;float:]left;background:#DDAODD; 
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} 
#sub-div3{width:100px;height:90px;background:#CCFF66;} 
</style> 
</head> 
<body> 
<div idq="containl"> 流 动 元 素 </div> 
<div idq="contain2"> 绝 对 定位 元 素 
<div id="sub-div1"> 子 元 素 1 一 绝对 定位 </div> 
<div id="sub-div2"> 子 元 素 2 一 浮动 </div> 
<div idq="sub-div3"> 子 元 素 3 一 流动 </div> 


</div> 

<div id="contain3"> 浮 动 元 素 </div> 

</body> 

把 相对 定位 和 绝对 定位 结合 起 来 ， 形 成 混合 定位 ， 混 合 定位 是 利用 相对 定位 的 流动 优 
势 和 绝对 定位 的 布局 优势 实现 网 页 定位 的 灵活 性 和 精确 性 优势 互补 。 


9.3.2 z-index 属性 


因为 绝对 定位 的 元 素 与 文档 流 无 关 ， 所 以 它们 可 以 覆盖 页 面 上 的 其 他 元 素 。 可 以 通过 
设置 z-index 属性 来 控制 这 些 块 的 堆 秋 顺序 。z-index 属性 用 于 设置 元 素 的 堆 炙 顺序 ， 拥 有 
更 高 堆 共 顺序 的 元 素 总 是 会 处 于 堆 生 顺序 较 低 的 元 素 的 前 面 。 

z-index 的 值 默 认为 “auto”， 表 示 堆 释 顺 序 
与 父 元 素 相同 ， 可 以 设置 具体 的 值 ， 也 可 以 为 
负数 。 

把 CSS(position-absolute).html 中 绝对 定位 
的 id="box-absolute" 块 的 z-index 属性 设 为 -1， 
则 块 1 和 块 3 在 绝对 定位 块 的 上 面 显 示 ， 如 图 
9.37 所 示 。 

#box-absolutef{ 

position:absolute; 


图 9.37 CSS(position-absolute).html 示意 图 2 


left:30px;top:30px; 
background-color:#FCO; 
z-index:-1; 

} 


提示 : z-index 值 后 面 没有 单位 ， 如 果 写 成 “z-index:1px” 将 是 错误 的 。 


9.4 基本 布局 模板 


CSS 网 页 布局 千变万化 ， 用 户 应 该 掌握 CSS 基本 布局 类 型 ， 常 见 的 CSS 布局 类 型 主 
要 有 固定 (液态 ) 布局 和 弹性 伸缩 布局 。 
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9.4.1 固定 (液态 ) 布局 


固定 是 指 列 宽 以 像素 指定 ， 列 的 宽度 不 会 根据 浏览 器 的 大 小 或 站 点 访 ” 国 雷 
问 者 的 设置 来 ”调整 。 


明了 固定 布局 的 基本 思想 。 
源 代码 如 下 : 视频 讲解 


<head> 
<title> 固 定 布局 </title> 
<style> 
.container { width: 960px; background: #FFFFFF;margin: 0 auto; } 
header {background: #ADB96E; height: 30px; } 
.Sidebarl {width: 170px;height: 100px; background: #EADCAE; display: 
inline-block; } 
article {width: 600px;height: 120px;background-color: #99CC33; 
margin:0px 1l0px;display: inline-block;} 
.Sidebar2 {width: 170px;height: 100px;background: #EADCAE;display: 
inline-block;} 
footer {background: #CCC49F;height: 20px;} 
</style> 
</head> 
<body> 
<div class="container"> 
<header> 标 题 </header> 
<aside class="sidebarl"> 边 栏 </aside> 
<article><h2> 内 容 </h2></article> 
<aside class="sidebar2"> 边 栏 </aside> 


<footer> 脚 注 </footer> 
</div> 
</body> 
由 于 是 固定 列 宽 ， 所 以 样式 宽度 均 以 像素 表示 。 该 页 面 在 浏览 器 中 的 显示 如 图 9.38 
所 示 。 


出 本 有 DaeoPhts I i 回 51nms59 和 ， 困 FRRSGE 四 -， 国 cao IE 


边栏 
ses 


图 9.38 ”CSS(layout-1).html 示意 图 1 
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提示 :“margin: 0 auto:” 是 设 定 <div class="container"> 左 、 右 外 边 距 为 自动 调整 ， 即 左 、 
右 外 边 距 是 相等 的 ， 由 于 <div class="container"> 的 包含 元 素 是 <body>， 而 且 <body> 里 只 有 
这 个 元 素 ， 所 以 可 以 将 <div class="container"> 在 <body> 里 居中 对 齐 。 

可 以 看 到 右边 的 边栏 并 没有 显示 在 内 容 的 右边 ， 而 是 显示 在 左边 栏 和 内 容 的 下 面 ， 这 
是 由 于 使 用 了 inline-block 水 平 呈现 元 素 ， 元 素 标签 代码 之 间 换 行 会 有 空格 呈现 的 间距 ， 因 
此 去 掉 标 签 代码 之 间 的 空格 就 没有 间距 了 。 

将 需要 水 平 呈 现 的 3 个 标签 写 在 一 行 上 ， 源 代码 如 下 : 

<aside class="sidebarl"> 边 栏 </aside><article<h2> 内 容 </h2></article><aside 

class="sidebar2"> 边 栏 </aside> 


或 去 掉 结 束 标 记 和 开始 标记 的 换行 符 ， 源 代码 如 下 : 


<aside class="sidebar1"> 边 栏 </aside><article> 
<h2> 内 容 </h2></article><aside class="sidebar2"> 
边栏 </aside> 


这 样 问题 就 解决 了 ， 如 图 9.39 所 示 。 


图 lceuhezt:ea342/exwgl。x 


所 3 © | 日 1ocalhost:63342/cxample/CSS(layout-1).html 
让 应 用 六 hsei23 导 骸 门 360 网 址 导航 、 国 山脉 户外 | 户外 服装 [名 百度 一 下 ， 作 就 知道 ”加 充 善 : TmL5 表 单 新 39) 高 密度 脱 罩 白 租 固 … 国 ,azchocl 在 内 教程 


图 9.39 ”CSS(layout-1).html 示意 图 2 


液态 是 指 列 宽 以 站 点 访问 者 的 浏览 器 宽度 的 百分比 形式 指定 ， 如 果 站 点 访问 者 将 浏览 
器 变 宽 或 变 窄 ， 列 宽 将 会 自动 进行 调整 。 
[ 圆 9.24 ”CSS(layout-2).html， 该 页 面 与 CSS(layout-1).html 的 内 容 结构 一 样 ， 不 同 的 
是 所 有 宽度 以 百分比 表示 ， 因 此 将 随 浏 览 器 的 宽度 缩放 ， 如 图 9.40 所 示 。 
轿 localhest:63342/exanple X 


所 3 © Dlocalhost:63342/example/CSS (layout-2).html 空 
说 应 用 “ 口 haol23 导 航 “ 门 360 癌 址 导航 [ 国 | 山 肪 户外 | 户外 服装 .…。 [ 国 ] 百度 一 下 ， 你 就 An 道 


图 9.40 ”CSS(layout-2).html 示意 图 
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样式 如 下 : 


<head> 
<style> 
.container { 
width: 80%; background: #FFFFFF; margin: 0 auto; 
max-width: 960px; /* 最 大 宽度 ， 防 止 布局 在 大 型 显示 器 上 过 宽 */ 
min-width: 480px; /* 最 小 宽度 ， 防 止 布 局 过 窄 */ 
header {background: #ADB96E; height: 30px;} 
.Sidebarl { 
width: 20%; height: 100px; background: #EADCAE; 
display: inline-block; 
} 
article { 
width: 60%; height: 120px; background-color: #99CC33; 
display: inline-block; 
} 
.sidebar2 { 
width: 20%; height: 100px; background: #EADCAE; 
display: inline-block; 
} 
footer {background: #CCC49F; height: 20px;} 
</style> 
</head> 
<body> 
<div class="container"> 
<header> 标 题 </header> 
<aside class="sidebarl"> 边 栏 </aside><article><h2> 内 容 </h2> </article> 
<aside class="sidebar2"> 边 栏 
</aside> 
<footer> 脚 注 </footer> 
</div> 
</body> 


固定 (液态) 布局 主要 使 用 了 行内 块 (inline-block)， 这 种 布局 方式 的 最 大 问题 是 会 在 
HTMLS5 元 素 间 演 染 空格 ， 在 行内 块 中 内 容 想 垂直 居中 也 不 容易 做 到 ， 而 且 行内 块 也 做 不 
到 让 两 个 相 邻 的 元 素 一 个 宽度 固定 ， 另 一 个 填充 剩余 空间 。 


9.4.2 ”弹性 伸缩 布局 (响应 式 Web 设计 ) 


弹性 伸缩 布局 使 用 CSS3 的 伸缩 盒 布 局 属性 , 使 得 常见 的 布局 模式 ( 例 
如 三 列 布局 ) 变 得 非常 简单 。 
贺 9.25 CSS3(dayoub .html， 以 3 列 显示 内 容 ， 带 有 标题 和 脚注 ， 说 
明了 弹性 伸缩 布局 的 基本 思想 ， 如 图 9.41 所 示 。 视频 讲解 


| 184 


第 9 章 页 面 布局 定位 


边栏 


地 


图 9.41 CSS3(layout).html 示意 图 


源 代码 如 下 : 


<head> 


<title> 弹 性 伸缩 布局 </title> 
<style> 


/* .container 在 垂直 方向 上 排列 伸缩 */ 


.container { 


} 


display: -webkit-box;display: -ms-flexbox; 

display: flex; 

-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms- 
flex-flow: column nowrap; 

flex-flow: column nowrap; 

width:100%; background: #FFFFFF; margin: 0 auto; 

max-width: 960px; /* 最 大 宽度 ， 防 止 布局 在 大 型 显示 器 上 过 宽 */ 
min-width: 260px; /* 最 小 宽度 ， 防 止 布局 过 罕 */ 


header {background: #ADB96E; height: 50px;} 
/ 兰 content 在 水 平方 向 上 排列 伸缩 ， 使 用 flex: 1 1 125pxz 的 伸缩 基准 值 在 缩小 时 
换行 */ 


#content{ 


display: -webkit-box;display: -ms-flexbox; 

display: flex; 
—webkit-box-orient:horizontal;-webkit-box-direction:normal; 
—ms-flex-flow:row wrap; 
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flex-flow:row wrap; 
3 
-Sidebarl { 
-Webkit-box-flex: 1;-ms-flex: 1 1 125px; 
ELoxs 1 | 25pxs 
height: 100px; background: #EADCAE; 
+ 
article { 
-Webkit-box-flex:37-ms-flex:3 1 375px; 
flex:3 1 375px; 
height: 120px;background-color: #99CC33; 
} 
.Sidebar2 { 
-webkit-box-flex:17-ms-flex:1 1 125px; 
flex:1 1 125px; 
height: 100px;background: #EADCAE; 
} 
/* 内 容 水 平 、 垂 直 居 中 */ 
header, .sidebarl,article, .sidebar2,footer { 
display: -webkit-box;display: -ms-flexbox; 
display: flex; 
-webkit-box-align: center;-ms-flex-align: center; 
align-items: center; 
—webkit-box-pack: center;-ms-flex-pack: center; 
justify-content: center; 
} 
footer {background: #CCC49F;height: 40px;} 
</style> 
</head> 
<body> 
<div class="container"> 
<header> 标 题 </header> 
<div id="content"> 
<aside class="sidebarl"> 边 栏 </aside> 
<article><h2> 内 容 </h2></article> 
<aside class="sidebar2"> 边 栏 </aside> 
</div> 
<footer> 脚 注 </footer> 
</div> 
</body> 


这 种 布局 方式 能 够 适应 当 浏览 器 窗口 宽度 变化 时 布局 自动 跟着 变化 ， 当 宽度 比较 大 时 
显示 3 列 ， 当 宽度 逐渐 变 小 时 显示 两 列 ， 当 宽度 更 小 时 《〈 跟 移动 设备 屏幕 宽度 相当 ) 则 以 
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1 列 显示 ， 这 实际 上 就 是 响应 式 Web 设计 (布局) 的 基本 思想 。 

在 没有 CSS3 伸缩 盒 之 前 ， 响 应 式 Web 设计 的 核心 技术 之 一 是 将 固定 大 小 (宽度 ) 转 
换 为 比例 大 小 ，CSS3 伸缩 盒 彻 底 解决 了 这 一 问题 。 

响应 式 Web 设计 的 另 一 核心 技术 是 使 用 媒体 查询 相对 于 视 口 大 小 应 用 不 同 的 CSS 规 
则 。 本 书 案例 全 部 采用 了 基于 HTML5 和 CSS3 的 响应 式 Web 设计 。 


9.5 ”了 叮 叮 书店 首页 的 布局 样式 设计 


节 建 立 )。 新 建 外 部 样式 表 文件 style.css〈 操 作 见 第 8 章 的 8.6 节 )。 

将 光标 定位 到 “<title> 叮 叮 书店 </title>” 的 后 面 ， 按 回 车 键 ， 输 入 下 面 
的 代码 : 

<link href="style.css" rel="stylesheet"> 

index.html 通过 链接 方式 使 用 外 部 样式 表 。 

打开 样式 表 文 件 style.css， 进 入 编辑 区 ， 按 下 面 的 步 又 设计 样式 。 

(1) 设计 通用 样式 。 

/* 公 共 */ 

/* 清 除 所 有 元 素 默认 的 内 、 外 边 距 ， 默 认 字体 是 微软 雅 黑 */ 

*{padding: 0px; margin: 0px;font-family:" 微 软 雅 黑 ",， Verdana, Arial, 


视频 讲解 


Helvetica, sans-serif;} 
/* 图 像 宽度 设 为 百分比 ， 可 以 自动 调整 宽度 ， 适 应 响应 式 Web 设计 */ 
img{width: 100%;border: Opx;} 
/* 目 前 移动 设备 屏幕 的 最 小 宽度 为 260px， 所 以 设 min-width 为 260px。margin: 0 auto 表 
示 整 个 页 面 内 容 自 动 居 中 */ 
.container{width:100%;max-width:1260px;min-width:260px;margin: 0 auto;} 
/* 屏 幕 宽度 大 于 420px， 页 面 显示 宽度 设 为 80%*/ 
emedia screen and (min-width: 420px) { 

.container{width:80%;} 
} 
(2) 进行 整体 布局 。 
整个 页 面 基于 弹性 伸缩 盒 , 采用 响应 式 Web 设计 进行 布局 , 主要 是 内 容 区 以 两 列 显示 。 
/* 布 局 */ 
/* 内 容 区 水 平方 向 伸缩 ， 当 到 达 最 小 宽度 时 换行 。 左 边 内 容 区 的 宽度 是 右边 边栏 区 的 两 倍 */ 


#content-wrapper{display: flex;flex-flow: row wrap;} 


main{flex:2;margin: 0.5rem; min-width: 260px;} 


asidefflex:17margin: 0.5rem; min-width: 260px;} 


在 浏览 器 中 的 显示 效果 如 图 9.42 所 示 ， 可 以 看 到 左边 内 容 区 和 右边 边栏 区 并 列 显 示 。 
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作为 下 一 KWebtR 作 ，HTMLS 权力 于 为 联网 开 
浇 娃 更 加 保 理 、 开 六 人 


图 9.42 叮 叮 书店 首页 布局 示意 图 


(3) 进行 局 部 布局 。 

设置 样式 ， 让 本 周 推荐 图 书 的 封面 图 像 和 文字 内 容 并 列 显 示 。 

/* 本 周 推荐 、 最 近 新 书 、 最 近 促销 水 平方 向 伸缩 ， 当 到 达 最 小 宽度 时 换行 */ 
.recommend-book .content,#new .content,#sales .content{display:flex; 
flex-flow: row wrap;} 

/* 本 周 推荐 图 书 封面 和 内 容 布局 的 空间 分 配 */ 

.recommend-book .content .cover{flex: 1; min-width: 260px;} 
.recommend-book .content .description{flex: 2;margin-right: lrem;} 


在 浏览 器 中 的 显示 效果 如 图 9.43 所 示 , 可 以 看 到 本 周 推荐 图 书 的 封面 图 像 和 文字 内 容 
已 经 并 列 显示 。 


作为 下 一 fcWebt 奏 ，j 有 5 政 力 于 为 互联 


参考 书 .这 术 书 条 作者 的 一 风 对 .本 台风 。 2 
十、 箱 的 给 、 严 相 性 天 ,下 广大 Web 开 用人 “ 
Er 


经 galavaSciipt 工 丛书， 从 1996 和 LI .二 书 


Ruby Programming Language》 LA 


3 desp learning] ¥43.50 
¥5200 


图 9.43 叮 叮 书店 首页 布局 示意 图 2 
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设置 样式 ， 让 最 近 新 书 和 最 近 促 销 里 每 本 书 的 内 容 介绍 按 列 顺序 显示 。 


/* 最 近 新 书 、 最 近 促销 内 容 按 列 方向 伸缩 */ 
.book{flex:1;min-width: 260px;margin: 0.5rem;} 
.effect-l{display: flex;flex-flow: column;} 


在 浏览 器 中 的 显示 效果 如 图 9.44 所 示 ， 可 以 看 到 每 本 书 的 内 容 介绍 已 经 按 列 显示 。 


6 ¥43.50 +5200 


图 9.44 叮 叮 书店 首页 布局 示意 图 3 


设置 样式 ， 让 图 书 分 类 和 合作 伙伴 内 容 并 列 显示 。 


/* 图 书 分 类 和 合作 伙伴 水 平方 向 伸缩 */ 
#classify-partner{display:flex;} 
#classify{flex: 1;} 
#partner{flex: 1;} 


在 浏览 器 中 的 显示 效果 如 图 9.45 所 示 ， 可 以 看 到 图 书 分 类 和 合作 伙伴 内 容 已 经 并 列 


显示 。 


图 书 分 类 合作 伙伴 
。 编程 语言 。 中 国电 子 商务 研究 中 心 


各 语言 


叮 叮 书店 成 立 于 2010 年 6 月 ， 是 由 教育 部 主 
管 、 清 华 大 学 主办 的 综合 出 版 单位 ， 植 根 

于 “请 华 ” 这 座 久 负 彝 名 的 高 等 学 府 ， 乖 承 清 
华人 “自强 不 息 ， 厚 德 载 物 ”的 人 文 精神 。 


图 9.45 叮 叮 书店 首页 布局 示意 图 4 
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设置 样式 ， 让 最 近 新 书 和 最 近 促 销 里 的 图 像 、“ 加 入 购物 车 详细 内 容 ” 链 接 居中 ， 让 
显示 版 权 信息 的 文字 内 容 居 中 ， 当 宽度 大 于 640px 时 才 显 示 版 权 信息 。 

/* 最 近 新 书 和 最 近 促销 里 的 图 像 、“ 加 入 购物 车 详细 内 容 ” 链 接 居 中 */ 

-effect-1 .image-box, .cart-more{display: flex;justify-content: center;} 


/* 显 示 版 权 信 息 的 文字 内 容 居中 */ 
#copyright{height: 90px;display: none; flex-flow:column;justify-content: 


center;align-items: center;font-size: 1.1lrem;} 

/* 宽 度 大 于 640px 时 显示 版 权 信 息 */ 

@media screen and (min-width: 640px) { 
#copyright {display:flex;} 

| 


设置 样式 ， 让 本 周 推荐 里 图 书 的 下 边框 为 实 线 ， 本 周 推荐 、 最 近 新 书 、 最 近 促 销 、 边 
栏 广告 、 图 书 分 类 和 合作 伙伴 的 下 边框 为 虚线 。 


/* 定 义 本 周 推荐 里 图 书 的 下 边框 为 实 线 */ 

-recommend-book{fborder-bottom:hsl (0, 0%, 80%) solid lpx; padding-bottom: lrem;} 
/* 定 义 本 周 推荐 、 最 近 新 书 、 最 近 促 销 、 边 栏 广 告 、 图 书 分 类 和 合作 伙伴 的 下 边框 为 虚线 */ 
#recommend, #new, #sales, #best-selling, #classify-partner, #about, #advert{ 
border-bottom:hsl (0, 0%, 80%) dashed lpx;margin-bottom:1lrem; padding-bottom: lrem;} 


在 浏览 器 中 的 显示 效果 如 图 9.46 所 示 ， 可 以 看 到 实 线 边 框 和 虚线 边框 。 


著 有 多 部 C#、.NET 和 Java 方 面 的 大 

都 头 作品 。 其 中 《ASP.NET 4 高 级 程 

序 设计 ( 第 4 版 ) 》、《 精 通 

ASPJNET MVC 3 杠 鞭 (第 3 版 ) ) 销 

量 均 在 同 品种 中 名 列 前 楚 ， 备 受 读者 a 师 销 图 书 Di 
推 崎 ，Freeman 专 门 为 网 页 开发 新 手 一 一 
和 网 页 设计 师 打造 的 经 典 参考 书 , 这 

本 书生 承 作者 的 一 贯 风格 ， 隆 中 风 

起 、 简 约 注 练 、 腔 可 性 强 ,是 广大 

Web 开 发 人 员 的 必 读 经 典 。 


《JavaScript 权 威 指南 》 
经 典 的 JavaScript 工 具 书 , 从 1996 年 
以 来 ,本 书 已 经 成 为 lavaScipl 程 序 
员 心 中 的 《圣经 》。 
David Flanagan , 是 一 名 程序 员 ， 
也 是 一 名 作家 。 他 在 O，Reily 出 版 x RE 
的 其 他 精 销 书 还 包括 《javascript i 
Pocket Reference》、《The Ruby ngl ¥43.50 
Programming Language》 以 及 
《Java in a Nutshell》- David 毕 业 
于 麻 省 至 工学 院 , 获得 计算 机 科学 与 
工程 学 位 。 他 和 妻子 、 孩 子 一 起 生活 
在 西 验 贸 和 温哥华 之 间 的 美国 太平 洋 
西北 海岸 


图 9.46 叮 叮 书店 首页 布局 示意 图 5 


9.6 小 结 


本 章 介绍 了 CSS 盒 模型 的 概念 和 CSS 盒 模型 的 基本 属性 , 详细 介绍 了 CSS 定位 元 素 ， 
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分 析 了 常见 的 CSS 基本 布局 模型 ， 最 后 详细 介绍 了 叮 叮 书店 首页 的 布局 过 程 和 操作 。 


9.7 “习题 


@ 选择 题 

(1) HTML 中 的 元 素 可 分 为 块 状元 素 和 行内 元 素 ， 其 中 ( ”) 是 块 状元 素 。 
A. <p> B. <b> C. <a> D. <span> 

(2) 在 下 列 标 签 中 不 属于 块 状元 素 的 是 ( )。 
A. <br> B. <p> C. <div> D. <hr> 


(3) 关于 浮动 ， 下 列 样式 规则 中 不 正确 的 是 )。 
A. img{float:left:margin:20px:} 
B. img{float:right:right:30px:;} 
C. img{float:right:width:120px:height:80px:} 
D. img{float:left:margin-bottom:2em:;} 
(4) 在 以 下 代码 片段 中 ， 属 于 绝对 定位 的 是 )。 
A. #box{width:100px:height:50px:} 
B. #box{width:100px:height:50px:position:absolute:} 
C. 元 ox{fwidth:100px:height:S0px:position:static:} 
BD: a eh erg 
(5) 一 个 盒 模 型 由 4 个 部 分 组 成 ， 其 中 不 包括 )。 
A. padding B. width C. border D. margin 
(6) 下 面 关于 盒 模型 定位 的 说 法 中 错误 的 是 〈 )。 
A. 静态 定位 表示 块 状元 素 保持 在 标准 文档 流 中 原来 的 位 置 ， 不 做 任何 移动 
B， 相 对 定位 是 相对 于 元 素 的 原 有 位 置 进行 偏 移 ， 不 会 脱离 标准 文档 流 ， 也 不 会 
对 其 他 元 素 产 生 任何 影响 
C. 绝对 定位 以 最 近 的 一 个 已 定位 的 父 级 元 素 为 基准 ， 若 无 父 级 元 素 或 父 级 元 素 
未 定位 ， 则 以 浏览 器 窗口 为 基准 
D. 绝对 定位 不 会 脱离 标准 文档 流 ， 也 不 影响 同一 级 元 素 的 位 置 
(7) 下 面 的 代码 中 包含 ( ”) 个 BOX。 


<div> 
请 查看 <span> 我 的 BLOG</span>， 网 址 如 下 : <p>blog.163.com</p> 
</div> 

A. 3 B. 4 GC。 了 .和 2 


(8) 阅读 下 列 代码 片段 ， 关 于 元 素 <div id="b"> 定 位 的 说 法 正确 的 是 ( )。 


<style> 
#a{ width:400px;height:300px;border:1lpx solid red;float:right;} 
#b{ 

width:100px;height:100px;border:1lpx solid blue; 
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position:absolute; left:10px;top:10px; 
} 
</style> 
<body> 
<div ia=nan> 
<div id="b"></div> 
</div> 
</body> 
A. 相对 于 浏览 器 窗 体 的 右上 角 进 行 位 置 偏 移 
B， 相 对 于 浏览 器 窗 体 的 左上 角 进 行 位 置 偏 移 
C. 相对 于 自身 的 位 置 进行 位 置 偏 移 
D. 相对 于 元 素 a 的 左上 角 位 置 进行 位 置 偏 移 
(9) ( ) 盒 模型 显示 方式 是 弹性 伸缩 盒 。 
A. display:flex B. display:block 
C. display:inline D. display:inline-block 
(10) 以 下 关于 包含 块 的 说 法 中 正确 的 是 ( 5 
A. 包含 块 的 作用 是 为 绝对 定位 的 元 素 提供 定位 基准 
B. 包含 块 指 的 是 绝对 定位 的 父 级 容器 
C. 包含 块 指 的 是 相对 定位 的 父 级 容器 
D. 包含 块 指 设置 了 float 属性 的 元 素 
@ 简 答题 
(1) 构成 CSS 盒 模型 的 属性 有 哪些 ? 
(2) CSS 定位 方式 有 几 种 ? 各 有 什么 特点 ? 
(3) 如 何 定义 包含 块 ? 为 什么 使 用 包含 块 ? 


(4) 弹性 伸缩 盒 模型 有 哪些 优势 ? 如 何 计 算 弹 性 伸缩 盒 元 素 的 宽度 ? 


(5) 响应 式 Web 设计 核心 技术 有 哪些 ? 
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页 面 上 所 有 的 元 素 都 可 以 通过 CSS 属性 设 定 自己 的 外 观 ， 包 括 广 本、 背景、 列表 、 字 
体 、 尺 寸 、 表 格 等 。 本 章 首先 详细 介绍 CSS 常用 属性 ， 接 下 来 讨论 如 何 使 用 CSS 表格 样 
式 属性 ， 最 后 介绍 叮 叮 书店 首页 元 素 外 观 的 具体 设置 。 

本 章 要 点 : 

如 CSS 常用 属性 。 

< 他 CSS 表格 属性 。 


10.1 背景 


10.1.1 CSS 背景 


CSS 允许 应 用 颜色 作为 背景 ， 也 可 以 使 用 图 像 作为 背景 。 表 10.1 列 出 了 CSS 的 背景 
属性 。 
表 10.1 CSS 背景 属性 


属 性 描述 

background 简写 属性 ， 在 一 个 声明 中 设置 背景 属性 
background-color 设置 背景 颜色 
background-image 设置 背景 图 像 
background-attachment 设置 背景 图 像 是 否 固定 或 者 随 者 页 面 滚动 
background-position 设置 背景 图 像 的 起 始 位 置 
background-repeat 设置 背景 图 像 是 否 重复 以 及 如 何 重复 

@@ background 属性 


background 属性 可 以 在 一 个 声明 中 设置 所 有 的 背景 属性 。 背 景 属性 出 现 的 顺序 无 关 紧 
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要 ， 如 果 用 户 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 。 所 有 背景 属性 都 不 能 
如 果 设 置 元 素 背 景 ， 最 好 使 用 这 个 属性 ， 而 不 是 分 别 使 用 单个 属性 。 ea 


body{background:#00FF00 url (bg.jpg) no-repeat fixed top;} 

@ 背景 色 

background-color 属性 为 元 素 设 置 背景 色 。 例 如 把 元 素 的 背景 设置 为 灰色 ; 

p{background-color:gray;} 

用 户 可 以 为 所 有 元 素 设置 背景 色 。background-color 属性 不 能 继承 ， 默 认 值 是 
transparent， 如 果 一 个 元 素 没有 指定 背景 色 ， 那 么 背景 就 是 透明 的 。 

如 果 同 时 定义 了 背景 颜色 和 背景 图 像 ， 背 景 图 像 将 覆盖 背景 颜色 。 

@ 背景 图 像 

background-image 属性 可 以 把 图 像 作 为 背景 ， 默 认 值 是 none， 表 示 背 景 上 没有 放置 任 
何 图 像 。 其 语法 如 下 : 

background-image: <bg-image> [ ，<bg-image> ] 

如 果 需 要 设置 一 个 背景 图 像 ， 必 须 为 这 个 属性 设置 一 个 URL 值 。 例 如 : 

body{background-image:url (bg.jpg);} 

CSS3 允许 使 用 多 个 背景 图 像 ， 如 果 定 义 了 多 个 背景 图 像 ， 并 且 背 景 图 像 之 间 有 重 登 ， 

写 在 前 面 的 将 会 覆盖 写 在 后 面 的 图 像 。 

@ 背景 的 重复 

当 背 景 图 像 的 大 小 小 于 元 素 区 域 时 ， 可 以 使 用 background-repeat 属性 设置 是 否 重复 以 
及 如 何 重复 背景 图 像 。 其 语法 如 下 : 

background-repeat: <repeat-style> [ ，<repeat-style> ] 

这 里 可 以 使 用 两 个 参数 ， 第 1 个 用 于 横向 ， 第 2 个 用 于 纵向 ， 如 果 只 有 一 个 参数 ， 则 
用 于 横向 和 纵向 。repeat-x 相当 于 repeat no-repeat，repeat-y 相当 于 no-repeat repeat。 表 10.2 
列 出 了 background-repeat 属性 值 。 

表 10.2 background-repeat 属性 值 


值 描 述 
repeat 默认 值 ， 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 
Tepeat-X 背景 图 像 将 在 水 平方 向 重复 
repeat-y 背景 图 像 将 在 垂直 方向 重复 
no-repeat 背景 图 像 将 仅 显 示 一 次 ， 不 允许 图 像 在 任何 方向 上 重复 
round 背景 图 像 自动 缩放 直到 填充 满 整个 容器 
space 背景 图 像 以 相同 的 间距 平 铺 填充 满 整 个 容器 或 某 个 方向 


例如 让 背景 图 像 仅 在 垂直 方向 上 重复 : 


body{background-image:url (bg.jpg) ;background-repeat :repeat—y;} 


| 194 


第 10 章 “元素 外 观 必 性 1 0 


@ 背景 的 定位 
background-position 属性 用 来 设置 图 像 在 背景 中 的 位 置 。 其 语法 如 下 : 


background-position: <position> [ ,<position> ]* 


户 可 以 为 多 个 背景 图 像 指定 位 置 ， 位 置 使 用 两 个 参数 ， 表 10.3 列 出 了 
background-position 属性 值 。 


表 10.3 background-position 属性 值 
值 描 述 


top left、top center、top right 


默认 值 : 0% 0% 
center left、center center、center right 如 果 仅 规定 了 一 个 关键 词 ， 那 么 第 2 个 值 将 是 “center” 
bottom left、bottom center、bottom right 


xX9% 是 水 平 位 置 ，y%6 是 垂直 位 置 。 左 上 角 是 0% 0%， 右 下 角 


人 是 10096 10096。 如 果 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50% 
xpos 是 水 平 位 置 ，ypos 是 冬 直 位 置 。 左 上 角 是 0 0， 单 位 是 
length (xpos ypos) 像素 或 其 他 CSS 单位 。 如 果 仅 规定 了 一 个 值 ， 另 一 个 值 将 


是 50%。 另 外 ， 用 户 可 以 混合 使 用 % 和 值 
下 面 的 例子 在 body 元 素 中 将 一 个 背景 图 像 居 中 放置 : 


body{ 
background-image:url (bg.jpg); 
background-repeat :no-repeat;background-position:center; 


根据 规范 ， 关 键 字 可 以 按 任 何 顺序 出 现 ， 只 要 保证 不 超过 两 个 关键 字 即 可 ， 一 个 对 应 
水 平方 向 ， 另 一 个 对 应 垂直 方向 。 如 果 只 出 现 一 个 关键 字 ， 则 认为 另 一 个 关键 字 是 center。 

2) 百分数 值 

百分数 值 同时 应 用 于 元 素 和 图 像 。 也 就 是 说 ， 图 像 中 描述 为 50% 50% 的 点 与 元 素 中 描 
述 为 50% 50% 的 点 对 齐 。 如 果 想 把 一 个 图 像 放 在 水 平方 向 203、 垂 直方 向 1/3 处 , 可 以 如 下 


声明 : 


body{ 
background-image:url('bg.jpg'); 
background-repeat :no-repeat;background-position:66% 33%; 
} 
3) 长 度 值 
长 度 值 是 元 素 内 边 距 左上 角 的 偏 移 , 偏 移 点 是 图 像 的 左上 角 。 这 一 点 与 百分数 值 不 同 ， 
图 像 的 左上 角 与 background-position 声明 中 指定 的 点 对 齐 。 
如 果 设 置 值 为 SOpx 100px， 图 像 的 左上 角 将 在 元 素 内 边 距 左上 角 的 向 右 50 像素 、 向 
下 100 像素 的 位 置 上 : 


body{ 
background-image:url('bg.jpg'); 
background-repeat :no-repeat;background-position:50px 100px; 
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} 


在 CSS3 中 位 置 可 以 使 用 4 个 值 ， 如 果 提 供 4 个 值 ， 在 每 个 percentage 或 length 前 都 
必须 有 一 个 关键 字 (left、center、right、top 或 bottom)， 表 示 相 对 于 关键 字 位 置 进行 偏 移 
的 值 。 

如 果 页 面 文档 或 元 素 内 容 比 较 多 ， 当 文档 或 元 素 内 容 向 下 滚动 时 ， 背 景 图 像 也 会 随 之 
滚动 ， 如 果 文 档 或 者 元 素 内 容 滚动 到 超过 图 像 的 位 置 ， 图 像 就 会 消失 ， 用 户 可 以 通过 设置 
background-attachment 属性 防止 这 种 滚动 。 表 10.4 列 出 了 background-attachment 属性 值 。 

表 10.4 background-attachment 属性 值 


值 描 述 
scroll | 默认 值 ， 背 景 图 像 会 随 着 页 面 的 滚动 而 移动 
fixed | 背景 图 像 相对 于 窗 体 固定 
local 背景 图 像 相 对 于 元 素 内 容 固 定 


background-attachment 属性 的 默认 值 是 scroll， 在 默认 情况 下 ， 背 景 会 随 文档 滚动 。 如 
果 声 明 图 像 相 对 于 可 视 区 是 固定 的 ， 则 不 会 受到 滚动 的 影响 ， 例 如 : 


body{background-image:url (bg.jpg) ;background-attachment :fixed} 


10.1.2 CSS3 背景 


CSS3 增加 了 3 个 背景 属性 。 表 10.5 列 出 了 CSS3 增加 的 背景 属性 。 
表 10.5 CSS3 背景 属性 
属 性 


background-origin 


描述 
设置 背景 图 像 显 示 原 点 位 置 
设置 背景 图 像 向 外 裁剪 的 区 域 
设置 背景 图 像 的 尺寸 大 小 


background-clip 


background-size 


@ background-origin 属性 

background-origin 属性 设置 背景 图 像 显 示 原 点 位 置 。 表 10.6 列 出 了 background-origin 
属性 值 。 

表 10.6 background-origin 属性 值 
值 描 述 

padding-box | 默认 值 ， 从 padding 区 域 ( 含 padding) 开始 显示 背景 图 像 

border-box | 从 border ( 含 border) 开始 显示 背景 图 像 

加 background-clip 属性 

background-clip 属性 设置 背景 图 像 向 外 裁剪 的 区 域 。 表 10.7 列 出 了 background-clip 属 
性 值 。 
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表 10.7 background-clip 属性 值 


值 描 述 
border-box | 默认 值 ， 从 border 区 域 (不 含 border) 开始 向 外 裁剪 背景 
padding-box 从 padding 区 域 (不 含 padding) 开始 向 外 裁剪 背景 


content-box 从 content 区 域 开 始 向 外 裁剪 背景 


@ background-size 属性 

background-size 属性 设置 背景 图 像 的 尺寸 大 小 ， 可 以 设置 两 个 参数 (cover 和 contain 
除外 )。 第 1 个 用 于 定义 背景 图 像 的 宽度 ,第 2 个 用 于 定义 背景 图 像 的 高 度 。 如 果 只 有 一 个 
值 ， 将 用 于 定义 背景 图 像 的 宽度 ， 高 度 为 aato， 背 景 图 像 以 提供 的 宽度 作为 参照 来 进行 等 
比 缩放 。 表 10.8 列 出 了 background-size 属性 值 。 


表 10.8 background-size 属性 值 


用 长 度 值 指定 背景 图 像 大 小 ， 不 允许 为 负 值 
用 百分比 指定 背景 图 像 大 小 ， 不 允许 为 负 值 
默认 值 ， 背 景 图 像 的 真实 大 小 


percentage 


Cover 
将 背景 图 像 等 比 缩放 到 宽度 或 高 度 与 容器 的 宽度 或 高 度 相等 ， 背 景 图 像 始 终 被 包含 在 
容器 内 
加 .1 CSS3(background-image).html， 使 用 了 CSS3 背景 属性 ， 如 图 10.1 所 示 。 


contain 


多 个 背 虹 图 你 人 S 训 
Se 


视频 讲解 


的 售 令 合 令 令 舍 


Ce 


图 10.1 CSS3(background-image).html 示意 图 
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<head> 
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<title> 背 景 图 像 </title> 


<style> 


div{width: 300px; height: 100px; border: 10px dotted #FF0000;padding: 
40px;margin-bottom: 10px; } 
/*#divl 设置 两 个 背景 图 像 ， 从 内 容 区 域 开始 显示 背景 图 像 ，background-origin: 


content-box*/ 
#divl { 
background: 


url ("images/border-image.png") bottom 20px right 


20px no-repeat content-box,url ("images/background-image-1.jpg") 


top Opx left Opx no-repeat content-box #B4B4B4; 


GBDaciEy: O05 


} 
/*#div2 背景 图 像 从 内 容 区 域 开 始 向 外 裁剪 ，background-clip:content-box*/ 


#div2 { 


background: url("images/border-image.png") content-box,url("images/ 
background-image-1.jpg") content-box #B4B4B4; 


} 


/* 把 #div3 背景 图 像 等 比 缩放 到 整个 内 边 距 和 内 容 区 域 , background-size:cover*/ 


#div3 { 


background: url ("images/background-image-1.jpg") no-repeat #B4B4B4; 
background-size:cover; 


} 
</style> 
</head> 
<body> 


<div id="div1"> 多 个 背景 图 像 </div> 
<div id="div2"> 背 景 图 像 向 外 裁剪 </div> 
<div id="div3"> 背 景 图 像 等 比 缩放 </div> 


</body> 


提示 : 如 果 设 置 多 个 背景 图 像 ，background-color 只 能 设置 一 次 ， 背 景 颜色 要 求 定义 在 


最 后 的 图 像 上 。 


10.1.3 CSS3 透 


明度 


在 CSS3 中 opacity 属性 月 
0.0 一 1.0。 例 如 : 


#divil{ 


于 设置 整个 对 象 的 不 透明 度 ， 属 性 值 使 


background-color: #B4B4B4; 


background-image: url("images/border-image.png") 


opacity: 0.5; 
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10.2 字体 


CSS 字体 属性 定义 文本 中 的 字体 。 表 10.9 列 出 了 CSS 字体 属性 。 
表 10.9 CSS 字体 属性 


简写 属性 ， 在 一 个 声明 中 设置 所 有 字体 


font-family 字体 系列 
font-size | 字体 尺寸 
font-size/line-height | 字体 尺寸 和 行 高 
font-style | 字体 风格 


font-weight 字体 粗细 
10.2.1 指定 字体 


用 于 可 以 使 用 font-family 属性 定义 文档 采用 的 优先 字体 系列 。 

@ 通用 字体 系列 

CSS 主要 有 以 下 3 种 通用 字体 系列 。 

(1) serif 字 体系 列 : 字体 成 比例 ， 而 且 有 上 、 下 短线 。 成 比例 是 指 字 体 中 的 所 有 字符 
根据 其 不 同 大 小 有 不 同 的 宽度 ， 例 如 小 写 i 和 小 写 m 的 宽度 就 不 同 。 上 、 下 短线 是 每 个 字 
符 笔画 末端 的 装饰 ， 例 如 大 写 A 两 条 腿 底部 的 短线 。serif 字体 系列 包括 Times、Georgia 
和 New Century Schoolbook。 

(2) sans-serif 字体 系列 : 字体 是 成 比例 的 , 没有 上 、 下 短线 ,包括 Helvetica、Geneva、 
Verdana、Arial 或 Univers。 

(3) monospace 字体 系列 : 字体 并 不 是 成 比例 的 ， 通 常用 于 打印 机 输出 。 这 些 字体 每 
个 字符 的 宽度 都 必须 完全 相同 ， 所 以 小 写 的 1 和 小 写 的 m 有 相同 的 宽度 。monospace 字体 
系列 包括 Courier、Courier New 和 Andale Mono。 

如 果 希 望 文档 使 用 一 种 sans-serif 字体 ， 但 并 不 关心 是 哪 一 种 字体 : 


body{font-family:sans-serif;} 
这 样 就 会 从 sans-serif 字体 系列 中 选择 一 种 字体 (例如 Arial) 应 用 到 body。 

@ 指定 字体 系列 

除了 通用 字体 系列 以 外 ， 用 户 还 可 以 设置 更 具体 的 字体 。 例 如 文档 中 的 所 有 元 素 使 用 
“微软 雅 黑 ”字体 : 

body{font-family :微软 雅 黑 ; } 

指定 字体 会 产生 一 个 问题 , 如 果 用 户 没 有 安装 这 种 字体 , 则 只 能 使 用 默认 字体 来 显示 。 
此 时 可 以 通过 指定 字体 和 通用 字体 系列 相 结合 来 解决 这 个 问题 ， 例 如 : 


body{font-family: 微 软 雅 黑 , sans-serif;} 
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如 果 用 户 没有 安装 “微软 雅 黑 ” 字 体 , 但 安装 了 Times 字体 (serif 字体 系列 中 的 一 种 )， 
元 素 会 使 用 Times 字体 。 
提示 : 最 好 在 所 有 font-family 属性 值 中 都 提供 一 个 通用 字体 系列 。 


如 果 字 体 名 称 中 有 一 个 或 多 个 空格 〈 例 如 New York)， 需 要 在 声明 中 加 引号 。 
为 了 保证 在 浏览 者 的 计算 机 上 能 正确 地 显示 字体 ， 提 倡 使 用 系统 默认 字体 ， 例 如 中 文 
宋体 或 新 宋体 ， 英 文 Arial。 


10.2.2 ”指定 大 小 


font-size 属性 设置 元 素 的 字体 大 小 ， 其 实 它 设 置 的 是 字体 中 字符 框 的 高 度 ， 实 际 的 字 
符 字形 可 能 比 这 些 框 高 或 矮 ( 通 常会 矮 )。 表 10.10 列 出 了 font-size 属性 值 。 
表 10.10 font-size 属性 值 


描述 
把 字体 的 尺寸 设置 为 从 xx-small 到 xx-large 
默认 值 为 medium 


xx-small、x-small、small medium 
large、x-large、xx-large 


smaller 设置 为 比 父 元素 更 小 的 尺寸 

larger 设置 为 比 父 元 素 更 大 的 尺寸 

length 设置 为 一 个 固定 的 值 

% 设置 为 基于 父 元 素 的 一 个 百分比 值 


例如 设置 HTML 元 素 的 字体 尺寸 : 


h2{font-size:200%;} 
p{font-size:100%;} 


10.2.3 字体 风格 


font-style 属性 定义 字体 的 风格 。 表 10.11 列 出 了 font-style 属性 值 。 
表 10.11 font-style 属性 值 


值 描述 
normal 默认 值 ， 标 准 字体 样式 
italic 斜体 
oblique 倾斜 


例如 为 段落 设置 不 同 的 字体 风格 : 
p.italic{font-style:italic;} 
p-.oblique{font-style:oblique;} 


10.2.4 字体 粗细 


font-weight 属性 设置 文本 字体 的 粗细 。 表 10.12 列 出 了 font-weight 属性 值 。 
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表 10.12 font-weight 属性 值 


值 描 述 
normal 默认 值 ， 标 准 字符 
bold 粗 体 
bolder 更 粗 
lighter 更 细 


100、200、300、400、500、600、700、800、900 
例如 设置 段落 字体 的 粗细 : 


p:.thick{font-weight:bold;} 
p.thicker{font-weight:900;} 


加 10.2 Css(font).html， 使 用 了 常用 的 字体 属性 ， 如 图 10.2 所 示 。 


定义 由 细 到 粗 的 字符 。400 为 normal, 700 为 bold 


通用 字体 : 

This is a paragraph.Serif 字 体系 列 

This is a paragraph.Sans-serif 字 体系 列 
This is a paragraph.Monospace 字 体系 列 
字体 风格 : 

This is a paragraph. 标准 

This zs a paragraph. 体 休 

This is a paragraph. MA 

字体 粗细 : 

This is a paragraph. 标准 

This is a paragraph. 粗 体 

This is a paragraph. 900 


图 10.2 CSS(font).html 示意 图 
源 代码 如 下 : 
<head> 
<title>font 字体 </title> 
<style> 
p {font-size: 1.5rem; margin: Spx 0;} 
.ff1 {font-family: Georgia, "Times New Roman", Times, serif;} 
.ff2 {font-family: Verdana, Geneva, sans-serif;} 
.ff3 {font-family: "Courier New", Courier, monospace;} 
.fsl {font-style: normal;} 
:fs2 {font style: italics} 
.fs3 {font-style: oblique;} 
.fwl {font-weight: normal;} 
.fw2 {font-weight: bold;} 
.fw3 {font-weight: 900;} 
</style> 
</head> 
<body> 
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<p> 通 用 字体 : </p> 

<p class="ffl">This is a paragraph.Serif 字体 系列 </p> 

<p class="ff2">This is a paragraph.Sans-serif 字体 系列 </p> 
Paragraph .Monospace 字体 系列 </p> 


Dp 


<p class="ff3">This is 
<p> 字 体 风 格 : </p> 
<p class="fsl">This is a paragraph .标准 </p> 


p 


<p class="fs2">This is a paragraph. 斜 体 </p> 
<p class="fs3">This is a paragraph .倾斜 </p> 
<p> 字 体 粗细 : </p> 

<p class="fwl">This is a paragraph .标准 </p> 
<p class="fw2">This is a paragraph. 粗 体 </p> 
<p class="fw3">This is 
</body> 


10.2.5 CSS3 服务 器 端 字 体 


在 CSS3 之 前 ，Web 设计 师 必须 使 用 已 在 计算 机 上 安装 好 的 字体 。 现 在 通过 CSS3 
@font-face，Web 设计 师 可 以 使 用 他 们 喜欢 的 任意 字体 ， 并 将 该 字体 文件 存放 到 Web 服务 
器 上 ， 用 户 在 访问 页 面 时 ， 字 体会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 

字体 格式 类 型 主要 有 TrueType、EOT、OpenType、WOFF、SVG。 

。 TrueType: Windows 和 Mac 系统 使 用 的 字体 格式 , 由 数学 模式 定义 基于 轮廓 的 字体 。 

。 EOT (Embedded Open Type，.eot): EOT 是 嵌入 式 字 体 ， 由 微软 公司 开发 ， 允 许 

OpenType 字体 用 @font-face 嵌入 到 网 页 。 

。 OpenType 〈.otf): OpenType 由 微软 和 Adobe 公司 共同 开发 ， 微 软 公司 的 正 浏览 器 
全 部 采用 这 种 字体 ， 其 致力 于 替代 TrueType 字体 。 

。 WOFF (WebOpen Font Format，woff): WOFF 是 专门 为 Web 设计 的 字体 格式 标准 ， 
实际 上 是 对 TrueType 和 OpenType 等 字体 格式 的 封装 ， 字 体 文件 被 压缩 ， 以 便于 网 
络 传输 。 

。 SVG (Scalable Vector Graphics，.svg): SVG 是 W3C 制定 的 开放 标准 的 图 形 格式 。 
SVG 字体 使 用 SVG 技术 来 呈现 ， 另 外 还 有 一 种 gzip 压缩 格式 的 SVG 字体 。 

表 10.13 列 出 了 @font-face 规则 中 定义 的 描述 符 。 

表 10.13”@font-face 描述 符 


p» 


paragraph.900</p> 


描 述 符 值 描 述 
font-family | name 必需 。 规 定 字 体 的 名 称 
SIC | url 必需 。 定 义 字 体 文件 的 URL 
normal 
condensed 


font-stretch ultra-condensed 可 选 。 定 义 如 何 拉 伸 字体 ， 默 认为 "normal" 
extra-condensed 
semi-condensed 
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续 表 


expanded 


font-stretch | “Pan 可 选 。 定 义 如 何 拉 伸 字体 ， 默 认为 "normal" 
extra-expanded 


ultra-expanded 


ormal 
font-style italic 可 选 。 定 义 字 体 的 样式 ， 默 认为 "normal" 
oblique 


normal 
bold 
100 


font-weight 400 可 选 。 定 义 字 体 的 粗细 ， 默 认为 "normal" 


可 选 。 定义 字体 支持 的 UNICODE 字符 范围 , 默认 为 "U+0-10FFFF" 


unicode-range | unicode-range 


如 果 使 用 服务 器 端 字体 ， 必 须 首 先 在 @font-face 规则 中 定义 字体 的 名 称 和 位 置 ， 然 后 
在 HIML 元 素 中 通过 font-family 来 引用 服务 器 端 字体 。 

在 引用 字体 @font-face 时 ， 一 般 会 把 WOFF、EOT 和 SVG 引用 进去 ， 浏 览 器 根据 需 
要 下 载 不 同类 型 的 字体 ,。 正 浏览 器 一 般 使 用 EOT， 其 他 浏览 器 使 用 WOFF, 移动 设备 使 用 
TIF。 

目前 网 络 上 有 很 多 Web 字体 资源 ， 有 的 免费 ， 有 的 需要 付费 。 例 如 谷歌 免费 的 Web 
字体 (http:/www.google.com/webfonts); 第 一 中 文 Web font 服务 平台 一 一 有 字库 提供 的 中 
文 在 线 云 字体 (https://www.youziku.com/onlinefont/index ); Font Awesome (http://www. 
fontawesome. com.cn/) 提供 的 可 缩放 矢量 图 标 。 

如 果 用 户 需要 自己 制作 字体 ， 可 以 使 用 FontCreator 软件 ， 这 是 一 款 专 业 的 字体 制作 、 
字体 设计 软件 ， 可 以 用 来 制作 、 编 辑 和 修改 TTF、OTF、TTC 等 格式 的 字体 文件 ， 生 成 标 
准 的 字体 文件 ， 是 编辑 、 制 作 字 体 的 必 备 软件 。 

项 10.3 CSS3(@font-face) html， 说 明了 如 何 使 用 服务 器 端 字体 ， 如 图 10.3 所 示 。 


1292567890 oo 
了 JIQ 司 时 


图 10.3 ”CSS3(@font-face).html 示意 图 


ph 
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源 代 码 如 下 : 


<head> 
<tit1le> 服 务 器 端 字体 </title> 
<style> 
@font-face { 
font-family:"jpzk"; 
sre: url Eonts/Ipzk: otEE") 
} 
@font-face { 
font-family:"qtgg"; 
src: url("fonts/qtgg.otf"); 
} 
/* 引 用 多 种 字体 格式 ， 满 足 不 同 设备 和 浏览 器 的 需要 */ 
@font-face { 
font-family: 'FontAwesome'; 
src: urll('fonts/fontawesome-webfont.eot?v=4.7.0°'); 
src: url('fonts/fontawesome-webfont .eot?#iefix&v=4.7.0') 
format ('embedded-opentype'), url('fonts/fontawesome-webfont .woff22?Vv= 
4.7.0') format('woff2'), url('fonts/fontawesome-webfont .woff?v= 
4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v= 
li by format ( "truetype')， url('fonts/fontawesome-webfont . 
SVg?V=4.7.0#fontawesomeregular') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 
#divl { 
font-family: jpzk; 
font-size: 4rem; 
上 
#div2 { 
font-family: qtgg; 
font-size: 3rem; 
， 
#div3 { 
font-family: FontAwesome; 
font-size: 2rem; 
} 
</style> 
</head> 
<body> 
<div id="divl">12345</div> 
<div id="div2">1234567890</div> 
<!-- 用 字符 实体 引用 --> 
<div id="div3">&#xF000; &#xF001; &#xF002; &#xF003; &#xF004;</div> 
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</body> 
提示 : 如 果 用 户 不 知道 引用 字符 实体 的 名 称 或 编号 ， 可 以 使 用 FontCreator 软件 打开 字 
体 文件 查看 。 


10.3 ”文本 与 修饰 


10.3.1 文本 
CSS 文本 属性 可 用 来 定义 文本 的 外 观 ， 包 括 改变 文本 的 颜色 和 字符 间距 、 文 本 对 齐 、 
文本 装饰 和 文本 缩 进 等 。 表 10.14 列 出 了 CSS 文本 属性 。 
表 10.14 CSS 文 本 属性 


属 性 描 述 
line-height 行 高 
text-align 水 平 对 齐 


text-align-last | 设置 块 内 最 后 一 行 〈 包 括 仅 有 一 行文 本 ) 或 者 被 强制 打 断 换行 的 对 齐 方式 
text-decoration | 文本 修饰 
text-indent 缩 进 文本 首 行 
text-transform | 处 理 文本 的 大 小 写 
White-space 空白 处 理 方式 
letter-spacing ”| 字母 间隔 
截 短 文本 ， 设 置 是 否 使 用 一 个 省 略 标记 来 标示 对 象 内 文本 溢出 的 部 分 。elip: 截 短 文 
text-overflow | 本 ; ellipsis: 显示 省 略 符号 来 表示 被 截 短 的 文本 :string: 使 用 给 定 的 字符 串 来 表示 被 
截 短 的 文本 

@ 缩 进 文本 

把 段落 的 首 行 缩 进 是 一 种 最 常用 的 文本 格式 化 ， 使 用 text-indent 属性 可 以 方便 地 实现 
文本 缩 进 ， 该 长 度 可 以 是 负 值 。 例 如 下 面 的 样式 会 使 所 有 段落 的 首 行 缩 进 2rem: 

p{text-indent:2rem;} 

这 里 可 以 为 所 有 块 状 级 元 素 应 用 text-indent， 但 不 能 将 其 应 用 于 行内 元 素 。 如 果 想 把 
一 个 行内 元 素 的 第 1 行 “ 缩 进 ” 可 以 用 左 内 边 距 或 外 边 距 创造 这 种 效果 。 另外, text-indent 
属性 可 以 继承 。 

1) 使 用 负 值 

text-indent 可 以 设置 为 负 值 。 利 用 这 种 方式 可 以 实现 很 多 有 趣 的 效果 ， 例 如 “ 乃 挂 缩 
进 ?”， 即 第 1 行 悬挂 在 元 素 中 余下 部 分 的 左边 : 

p{text-indent:-2rem;} 

如 果 将 text-indent 设置 为 负 值 , 那么 首 行 的 某 些 文本 可 能 会 超出 浏览 器 窗口 的 左边 界 。 
为 了 避免 出 现 这 种 问题 ， 最 好 针对 负 缩 进 再 设置 外 边 距 或 内 边 距 ， 例 如 : 
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p{text-indent:-2rem; margin-left:2rem;} 


[到 10.4 Css(text-indent) html, 实现 了 “ 首 行 缩 进 ” 和 “悬挂 缩 进 "， 如 图 10.4 所 示 。 


首 行 缩 进 。 这 是 个 段落 ， 这 是 下段 
， 这 是 一 个 段落 ， 这 是 


悬挂 詹 进 。 这 是 一 个 段落 ， 这 是 一 个 生 落 ， 
是 一 个 段 


个 
落 ， 这 是 一 


这 放 个 民 请， 这 是 错 


视频 讲解 


图 10.4 CSS(text-indent).html 示意 图 


源 代码 如 下 : 
<head> 

<title>text-indent</title> 

<style> 

.pl {text-indent: 2rem;} 
.Pp2 {text-indent: -2rem;margin-left: 2rem;} 

</style> 
</head> 
<body> 
<p class="pl"> 首 行 缩 进 。 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 
一 个 段落 ， 这 是 一 个 段落 。</p> 
<p class="p2"> 悬 挂 缩 进 。 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 一 个 段落 ， 这 是 
一 个 段落 ， 这 是 一 个 段落 。</p> 
</body> 
2) 使 用 百分比 值 
百分数 相对 于 缩 进 元 素 父 元 素 的 宽度 。 换 句 话 说， 如 果 将 缩 进 值 设置 为 20%， 所 影响 

元 素 的 第 1 行 会 缩 进 其 父 元 素 宽度 的 20%。 
@ 水 平 对 章 
text-align 属性 规定 元 素 中 文本 的 水 平 对 齐 方式 。 表 10.15 列 出 了 text-align 属性 值 。 
表 10.15 text-align 属性 值 


值 描 述 


Ieft | 默认 值 ， 把 文本 排列 到 左边 


right | 把 文本 排列 到 右边 
center | 把 文本 排列 到 中 间 
justify 两 端 对 齐 ， 对 于 强制 打 断 的 行 及 最 后 一 行 〈 包 括 仅 有 一 行文 本 ) 不 做 处 理 


left、right 和 center 会 导致 元 素 中 的 文本 分 别 左 对 齐 、 右 对 齐 和 居中 。justify 是 两 端 对 
齐 ， 文 本 行 的 左 、 右 两 端 都 放 在 父 元 素 的 内 边界 上 ， 然 后 调整 单词 和 字母 间 的 间隔 ， 使 各 
行 的 长 度 恰 好 相等 。 

将 元 素 内 容 居 中 ， 也 可 以 通过 设置 左 、 右 外 边 距 来 实现 。 

text-align-last 属性 设置 块 内 最 后 一 行 (包括 仅 有 一 行文 本 ) 或 者 被 强制 打 断 换行 的 对 
齐 方式 。 表 10.16 列 出 了 text-align-last 属性 值 。 
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表 10.16 text-align-last 属性 值 


值 描 述 
auto | 无 特殊 对 齐 方 式 
left 内 容 左 对齐 
right 内 容 右 对 齐 
center 内 容 居 中 对 齐 
justify 内 容 两 端 对 齐 


[ 贺 10.5 CSS(textralign) html, 说 明了 文本 水 平 对 齐 方式 属性 的 使 用 , 如 图 10.5 所 示 。 


源 代码 如 下 : 


<head> 


内 容 两 端 对 齐 ， 最 后 一 行 居中 对 齐 。 内 容 两 端 对 齐 ， 最 
一 行 居中 对 齐 。 内 容 两 端 对 齐 ， 最 后 一 行 居中 对 齐 .内 
两 于 对 并 ， 最 后 一 居中 对 并 。 内 两 对 并 ， 最 后 


再 闻 


oi 


I 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。 内 
容 左 对 齐 。 内 容 左 对 齐 。 


内 容 居中 对 齐 。 站 人 内 容 居中 对 齐 。 内 容 居中 


内 容 右 对 齐 。 内 容 右 对 齐 。 内 容 右 对 齐 。 内 容 右 对 齐 。 内 
容 右 对 齐 。 


是 
取 


后 一行 两 端 对 齐 。 。 
最 后 一 行 两 端 对 齐 。 最 后 一 行 两 端 对 齐 。 最 后 一 行 两 端 对 
齐 。 最 后 一 行 两 端 对 齐 。 


和 换 行 


图 10.5 CSS(text-align).html 示意 图 


<title>text-align 水 平 对 齐 </title> 


<style> 


p{width: 400px; 


.pl 
.Pp2 
:Bb3 
-p4 
:5 


{text-align 
{text-align 
{text-align 
{text-align 


</style> 


</head> 
<body> 


border: solid lpx #000000;padding: 5px;} 


:justify;text-align-last: center;} 
:left;} 

:center;} 

rigBty 

{text-align— 


last:justify;} 


<p class="pl"> 内 容 两 端 对 齐 ， 最 后 一 行 居中 对 齐 。 内 容 两 端 对 齐 ， 最 后 一 行 居中 对 齐 。 内 容 两 
端 对 齐 ， 最 后 一 行 居中 对 齐 。 内 容 两 端 对 齐 ， 最 后 一 行 居中 对 齐 。 内 容 两 端 对 齐 ， 最 后 一 行 居中 对 


齐 。</p> 


<p class="p2"> 内 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。 内 容 左 对 齐 。</p> 
<p class="p3"> 内 容 居中 对 齐 。 内 容 居 中 对 齐 。 内 容 居 中 对 齐 。 内 容 居 中 对 齐 。</p> 
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<p class="p4"> 内 容 右 对 齐 。 内 容 右 对 齐 。 内 容 右 对 齐 。 内 容 右 对 齐 。 内 容 右 对 齐 。</p> 

<p class="p5"> 最 后 一 行 两 端 对 齐 。 换 行 。<br> 最 后 一 行 两 端 对 齐 。 最 后 一 行 两 端 对 齐 。 最 后 

一 行 两 端 对 齐 。 最 后 一 行 两 端 对 齐 。</p> 

</body> 

@ 字母 间隔 

letter-spacing 属性 设 定 字母 之 间 的 间隔 。 该 属性 的 值 可 以 是 任何 长 度 单 位 的 值 ， 默 认 
关键 字 是 normal， 输 入 的 长 度 值 会 使 字母 之 间 的 间隔 增加 或 减少 。 用 户 也 可 以 使 用 百分比 
指定 间隔 ， 可 以 为 负 值 。 

贺 10.6 CSS(letter-spacing).html， 使 用 了 字母 间隔 样式 属性 ， 如 图 10.6 所 示 。 


这 是 一 个 段落 
ji 和 


图 10.6 CSS(letter-spacing).html 示意 图 


源 代码 如 下 : 
<head> 
<title>letter-spacing 字母 间隔 </title> 
<style> 
p.spread {letter-spacing: 0.5rem;} 
p:tight {letter-spacing: -0.3rem;} 
</style> 
</head> 
<body> 
<p class="spread"> 这 是 一 个 段落 </p> 
<p class="tight"> 这 是 一 个 段落 </p> 
</body> 


@ 字符 转换 
text-transform 属性 处 理 文本 的 大 小 写 。 表 10.17 列 出 了 text-transform 属性 值 。 


表 10.17 text-transform 属性 值 


默认 值 ， 定 义 带 有 小 写字 母 和 大 写字 母 的 标准 文本 


none 
capitalize | 文本 中 的 每 个 单词 以 大 写字 母 开头 
uppercase | 仅 有 大 写字 母 
lowercase 仅 有 小 写字 母 
@ 处 理 空白 符 


white-space 属性 设置 如 何 处 理 元 素 内 的 空白 。 通 过 使 用 该 属性 ， 可 以 影响 浏览 器 处 理 
字 之 间 和 文本 行 之 间 的 空白 符 的 方式 。 表 10.18 列 出 了 white-space 属性 值 。 
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表 10.18 white-space 属性 值 


值 描 述 
normal 默认 值 ， 空 白 会 被 浏览 器 忽略 
pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 <pre> 标 签 
nowrap 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br> 标 签 为 止 
pre-wrap 保留 空白 符 序列 ， 但 是 正常 地 进行 换行 
pre-line 合并 空白 符 序列 ， 但 是 保留 换行 符 


HTML 默认 把 所 有 空白 符合 并 为 一 个 空格 。 用 户 可 以 用 以 下 声明 显 式 地 设置 这 种 默认 


行为 : 


的 换行 符 以 及 生成 的 自动 换行 符 会 保留 。 pre-line 和 pre-wrap 相反 , 会 像 正 常 


p{white-space:normal;} 


1) pre 

如 果 将 white-space 设置 为 pre， 就 像 HTML 的 pre 元 素 一 样 ， 空 
2) nowrap 

如 果 将 white-space 设置 为 nowrap, 会 防止 元 素 中 的 文本 换行 ,除非 使 用 了 一 个 br 元 素 。 
3) pre-wrap 和 pre-line 
如 果 将 white-space 设置 为 pre-wrapp， 文 本 会 保留 空白 符 序列 ， 正 常 


训 
Te 
人 
| 
pa 
bia 
讲 
尽 
更 
又 


也 换行 ， 源 文本 中 
文本 中 一 样 合 


并 空白 符 序列 ， 但 保留 换行 符 。 


表 10.19 总 结 了 white-space 属性 的 行为 。 
表 10.19 white-space 属性 的 行为 


于 自动 防 行 
Tine 公证 
mommal 大 证 
nowrap 下放 
国 不 于 
允许 


贺 10.7 CSS3(white-space).html， 使 用 white-space 属性 实现 了 一 个 水 平 滚动 面板 ， 


如 图 10.7 所 示 。 


水 平 滚动 面板 


HTML 权 威 指南 


视频 讲解 


图 10.7 CSS3(white-space).html 示意 图 


209 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 
源 代码 如 下 : 


<head> 
<title>white-space 空白 符 </title> 
<style> 
*{font-family: "微软 雅 黑 ";} 
/* 设 置 .scroll-panel 元 素 内 容 不 换行 */ 
.Scroll-panel{ 
white-space: nowrap; width: 100%; overflow-x: auto; overflow-y: hidden; 
display: -webkit-box; display: -ms-flexbox; 
display: flex; 
》 
.item{white-space: normal; margin: 0 0.5rem;} 
.caption {font-size: 1.2rem;line-height: 1.2; text-align: center;} 
</style> 
</head> 
<body> 
<h2> 水 平 滚动 面板 </h2> 
<nav class="scroll-panel"> 
<section class="item"> 
"caption">HTML 权威 指南 </h3> 
<img src="images/prodl.jpg" alt=" 封 面 "> 


<h3 class: 


</section> 

<section class="item"> 
<h3 class="caption">HTML 权威 指南 </h3> 
<img src="images/prodl.jpg” alt=" 封 面 "> 

</section> 

<section class="item"> 
<h3 class="caption">HTML 权威 指南 </h3> 
<img src="images/prodl.jpg” alt=" 封 面 "> 

</section> 

<section class="item"> 
<h3 class="caption">HTML 权威 指南 </h3> 
<img src="images/prodl.jpg" alt=" 封 面 "> 

</section> 

<section class="item"> 


<h3 class="caption">HTML 权威 指南 </h3> 


<img src="images/prodl.jpg” alt=" 封 面 "> 
</section> 
</nav> 
</body> 
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10.3.2 ”修饰 


表 10.20 列 出 了 CSS 文本 修饰 属性 。 


表 10.20 CSS 文本 修饰 属性 
属 性 


text-decoration 


描述 
复合 属性 ， 设 置 文本 修饰 
设置 文本 修饰 线条 的 位 置 
设置 文本 修饰 线条 的 颜色 
设置 文本 修饰 线条 的 形状 


text-decoration-line 


text-decoration-color 


text-decoration-style 
text-decoration 属性 规定 文本 修饰 ， 该 属性 允许 对 文本 设置 某 种 效果 ， 例 如 加 下 画 线 。 
其 语法 如 下 : 


text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || 
<'text-decoration-color'> 


text-decoration-line 设置 文本 修饰 线条 的 位 置 ,相当 于 CSS2.1 中 的 text-decoration 属性 ， 
表 10.21 列 出 了 text-decoration-line 属性 值 。 


表 10.21 text-decoration-line 属性 值 


值 描 述 
none 默认 值 ， 定 义 标准 的 文本 
underline 下 夯 线 
overline 上 画 线 


line-through 穿 过 文本 的 一 条 线 


underline 会 对 元 素 加 下 画 线 ;， overline 的 作用 恰好 相反 ， 会 在 文本 的 顶端 夯 一 条 上 夯 
线 ;，line-through 则 在 文本 中 间 画 一 条 穿越 线 ，none 是 无 修饰 。 

text-decoration-style 设置 文本 修饰 线条 的 形状 ， 值 包括 solid 〈 实 线 )、double〈 双 线 )、 
dotted (点 状 线条 )、dashed (虚线 ) 和 wavy (波浪 线 )。text-decoration-color 设置 文本 修饰 
线条 的 颜色 。 

贺 13 CSS3(text-decoration).html， 使 用 了 文本 修饰 样式 属性 ， 如 图 10.8 所 示 。 


EI 


图 10.8 ”CSS3(text-decoration).html 示意 图 
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从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


源 代码 如 下 : 


<head> 
<title>text-decoration 文本 修饰 </title> 
<style> 
p{margin-top:10px;} 
.none{text-decoration:none;} 
.underline{text-decoration:underline;} 
.Overline{text-decoration:overline;} 
.line-through{text-decoration:line-through;} 
.text-decoration-css3{ 
—webkit-text-decoration:#F00 solid underline; 
text-decoration:#F00 solid underline; 
: 
</style> 
</head> 
<body> 
<p class="none"> 无 修饰 </p> 
<p class="underline"> 下 夯 线 </p> 
<p class="overline"> 上 画 线 </Pp> 
<p class="line-through"> 穿 越 线 </p> 


<p class="text-decoration-css3"> 如 果 浏 览 器 支持 ， 显 示 红 色 下 夯 线 。</p> 


</body> 


10.4 CSS3 文本 效果 


10.4.1 阴影 


在 CSS3 中 可 以 用 text-shadow 属性 给 页 面 上 的 文字 添加 阴影 效果 。 
text-shadow: h-shadow v-shadow blur color; 
表 10.22 列 出 了 text-shadow 属性 值 。 

表 10.22 text-shadow 属性 值 


其 语法 如 下 : 


值 描述 


h-shadow | 必需 。 水 平 阴影 的 位 置 ， 允 许 为 负 值 
v-shadow | 必需 。 甜 直 阴 影 的 位 置 ， 允 许 为 负 值 
blur | 可 选 。 模 糊 的 距离 
color 可 选 。 阴 影 的 颜色 


h-shadow、v-shadow 两 个 参数 是 阴影 离开 文字 的 横 方向 和 纵 方 向 的 位 移 距 离 ， 在 使 


时 必须 指定 。blur 参数 是 阴影 模糊 半径 ， 代 表 阴 影 向 外 模糊 时 的 模糊 范 


ee pe 


围 。color 是 绘制 了 
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影 时 所 使 用 的 颜色 ， 可 以 放 在 3 个 参数 之 前 ， 也 可 以 放 在 之 后 ， 当 没有 指定 颜色 值 的 时 4 
会 使 用 color 的 颜色 值 。 
户 可 以 使 用 text-shadow 二 分 文字 指定 多 个 阴影， 并 且 针 对 每 个 阴影 使 用 不 同 的 
颜色 ， 在 指定 多 个 阴影 的 时 候 要 使 用 逗号 “,” 将 多 个 阴影 进行 分 隔 。 


10.4.2 ”换行 


@ word-break 
word-break 规定 非 中 /日 /韩文 本 自动 换行 的 处 理 方法 。 表 10.23 列 出 了 word-break 属 
性 值 。 


表 10.23 word-break 属性 值 


值 描 述 
normal 使 用 浏览 器 默认 的 换行 规则 
break-all 允许 在 单词 内 换行 
keep-all 只 能 在 半角 空格 或 连 字 符 处 换行 


通过 使 用 word-break 属性 可 以 让 浏览 器 实现 在 任意 位 置换 行 。 

@ word-wrap 

word-wrap 属性 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换 到 下 一 行 ， 例 如 长 单词 或 
URL 地 址 等 。 

word-wrap 属性 值 有 以 下 两 个 。 

。 normal: 浏览 器 保持 默认 处 理 方式 ， 只 在 半角 空格 或 者 连 字符 的 地 方 换行 。 

。 break-word: 浏览 器 可 以 在 长 单词 或 URL 地址 内 部 进行 换行 。 


10.5 CSS3 多 列 


CSS3 能 够 创建 多 殉 来 显示 文本 ， 就 像 报 纸 、 杂 志 的 布局 一 样 。 表 10.24 列 出 了 CSS3 


表 10.24 CSS3 多 列 属性 


属 性 描 述 
columns 设置 column-width 和 column-count 的 简写 属性 
column-count 设置 分 隔 的 列 数 
column-width 设置 列 的 宽度 
column-gap 设置 列 之 间 的 间隔 
column-rule 设置 所 有 column-rule-* 的 简写 属性 
column-rule-color 设置 列 之 间 分 隔 2 频 色 
column-rule-style 设置 列 之 间 分 隔 线 的 样式 
column-rule-width 设置 列 之 间 分 隔 线 的 宽度 
column-span 设置 元 素 应 该 横 跨 的 列 数 
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从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


CSS3 创建 多 列 一 般 使 用 3 个 属性 ， 其 中 column-count 设置 元 素 应 该 被 分 隔 的 列 数 ， 
column-gap 设置 列 之 间 的 间隔 ，column-rule 设置 列 之 间 分 隔 线 的 宽度 、 样 式 和 颜色 。 
贺 10.9 CSS3(Multi-column) html， 使 用 了 多 列 属性 ， 如 图 10.9 所 示 。 


京 ， 申 | 于 对 捧 取 全 大 世人 沾 | 欧 加 义务 村 料 ， 元 体 办 生 
央 总 书记 、 国 家 主 | 康 社会 的 决胜 阶段 ， 也 是 | 在 全 社会 宣传 新 发 展 理 

生态 文明 建设 时 | 念 ， 发 扬 前 人 坊村 、 后 人 
成 | 乘 泳 精神 ， 多 种 树 、 种 好 
， 是 | 树 、 管 好 树 ， 让 大 地 山川 
举 | 绿 起 来 ， 让 人 民 余 众生 活 
头 | 环境 美 起 来 。 视频 讲解 


图 10.9 CSS3(Multi-column).html 示意 图 


源 代码 如 下 : 


<head> 
<title>CSS3 多 列 </title> 
<style> 
*{margin: Opx;} 
div{border:lpx solid #090;background:#EEE;width:600px;text-align: 
justify; padding: 5px 10px;} 
#Multi-column-1 
{ 
-moz-column-count:3; 
-moz-column-gap:15px; /*Firefox*/ 
-moz-column-rule:lpx solid #090; 
-webkit-column-count:37 /*Safari 和 Chrome*/ 
—webkit-column-gap:15px; 
-webkit-column-rule:lpx solid #090; 
column-count:3; 
column-gap:15px; 
column-rule:lpx solid #090; 
» 
</style> 
</head> 
<body> 
<div id="Multi-column-1"> 
<p> 新 华 社 北 京 4 月 5 日 电 : 中 共 中 央 总 书记 、 国 家 主席 、 中 央 军 委 主席 习近平 5 日 上 午 在 参 
加 首都 义务 植树 活动 时 强调 ， 中 华 民族 伟大 复兴 要 靠 全 体 中 华 儿女 共同 奋斗 。“ 十 三 五 ” 时 期 既 
是 全 面 建成 小 康 社 会 的 决胜 阶段 ， 也 是 生态 文明 建设 的 重要 时 期 。 发 展 林 业 是 全 面 建成 小 康 社 
会 的 重要 内 容 ， 是 生态 文明 建设 的 重要 举措 。 各 级 领导 干部 要 带头 参加 义务 植树 ， 身 体力 行 在 
全 社会 宣传 新 发 展 理念 ， 发 扬 前 人 栽 树 、 后 人 乘凉 精神 ， 多 种 树 、 种 好 树 、 管 好 树 ， 让 大 地 山 
川 绿 起 来 ， 让 人 民 群 众生 活 环境 美 起 来 。</p> 
</div> 
</body> 
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10.6 ”列表 


CSS 列表 属性 允许 用 户 设置 、 改 变 列表 项 标记 , 或 者 将 图 像 作为 列表 项 标记 。 表 10.25 
列 出 了 CSS 列表 属性 。 


表 10.25 CSS 列表 属性 


属 性 描 述 
list-style 简写 属性 ， 在 一 个 声明 中 设置 所 有 列表 属性 
list-style-image 将 图 像 设 置 为 列表 项 标记 
list-style-position 列表 项 标记 的 位 置 
list-style-type 列表 项 标记 的 类 型 
@ 列表 类 型 


list-style-type 属性 用 于 设置 列表 项 的 标记 类 型 。 表 10.26 列 出 了 list-style-type 属性 值 。 


表 10.26 list-style-type 属性 值 
值 描 述 


Done 


disc 
circle 
square 
decimal 
02、03 等 ) 

、 让、 这 、Y 等 ) 
〈I、I、IIT、IV、V 等 ) 
(a、B、Y 等 ) 
(a、b、c、d、e 等 ) 

大 写 拉丁 字母 (A、B、C、D、E 等 ) 


decimal-leading-zero 


lower-roman 


upper-roman 
lower-greek 
lower-latin 
upper-latin 


armenian 亚美尼亚 编号 方式 
georgian 乔治 亚 编号 方式 (an、ban、gan 等 ) 


例如 设置 列表 项 标记 类 型 为 空心 圆 ; 

ul.circle{list-style-type:circle;} 

@ 列表 项 图 像 

用 户 可 以 使 用 list-style-image 属性 将 图 像 设 置 为 列表 项 标记 ， 例 如 : 

ul lif{list-style-image:url(images/bg.gif):} 

@ 列表 项 标记 位 置 

list-style-position 属性 设置 在 何 处 放置 列表 项 标记 , 列表 项 标记 是 在 列表 项 内 容 之 外 还 
是 在 列表 项 内 容 之 内 。 表 10.27 列 出 了 list-style-position 属性 值 。 

表 10.27 list-style-position 属性 值 


值 描 述 
inside | 列表 项 标记 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 
outside | 默认 值 ， 保 持 标 记 位 于 文本 的 左 侧 。 列 表 项 标记 放置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 


215 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 〈 第 2 版 ) 
用 户 可 以 在 一 个 声明 中 设置 以 上 3 个 列表 样式 属性 ， 例 如 : 


li{list-style:url (images/bg.gif) square inside;} 


贺 10.10 Css(ist) html， 使 用 了 CSS 列表 属性 ， 如 图 10.10 所 示 。 


该 列表 的 list-style-position 的 值 是 "inside"， 


® XHTIL 
e CSS 
® JavaScript 


该 列表 的 list-style-position 的 值 是 "outside "， 


视频 讲解 


mm XHTIL 
» CSS 
» JavaScript 


图 10.10 CSSdisb.html 示意 图 


源 代码 如 下 : 
<head> 
<title>1ist 列表 </title> 
<style> 
ul.inside {list-style-position: inside;} 
ul.outside {list-style:outside url (images/left menu bullet.gif);} 
</style> 
</head> 
<body> 
<p> 该 列表 的 1ist-style-position 的 值 是 "inside": </p> 
<ul class="inside"> 
<1i>HTML</1i><1i>CSS</1i> 
<li>JavasScript</1i> 
</ul> 
<p> 该 列表 的 1ist-style-position 的 值 是 "outside": </p> 
<ul class="outside"> 
<1Li>HTML</1i><1i>CSS</1i><1li>JavaScript</1i> 
</ul> 
</body> 


10.7 尺寸 


CSS 尺寸 属性 控制 元 素 的 高 度 、 宽 度 和 行 间距 。 表 10.28 列 出 了 CSS 尺寸 属性 。 

提示 : 如 果 min-width 属性 的 值 大 于 max-width 属性 的 值 ，max-width 将 会 自动 以 
min-width 的 值 作为 自己 的 值 ; 如 果 min-height 属性 的 值 大 于 max-height 属性 的 值 , max-height 
将 会 自动 以 min-height 的 值 作为 自己 的 值 。 
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表 10.28 CSS 尺寸 属性 


属 性 描述 
元 素 宽度 ， 对 于 img， 其 width 值 将 根据 图 片 源 尺寸 等 比例 缩放 
, auto: 于 定 家 度 人 取决 于 其 他 属性 什 
a <length>: 长 度 ， 不 允许 为 负 什 
Se 百分比 ， 百 分 比 参照 父 元 素 宽度 ， 不 允许 为 负 值 
height 元 素 高 度 
和 行 疝 ， 值 可 以 设 交 为 区 字 ， 此 歼 字 会 与 当前 的 字体 尺寸 作 采 来 设 守 行 同 下 ， 
值 可 以 是 长 度 ， 设 置 固定 的 行 间距 
ei 元 素 最 大 高 度 ， 默 认 值 为 none， 无 最 大 高 度 限 制 ， 可 以 使 用 长 度 信和 和 百 分 
比 ， 不 允许 为 负 什 
元 来 最 大 宽度 ， 默 认 值 为 none， 无 最 大 宽度 限制 ， 可 以 使 用 长 度 值 和 百 分 
em 比 ， 不 允许 为 负 什 
min-height 元 素 最 小 高 度 ， 默 认 值 为 0， 可 以 使 用 长 度 值 和 百分比 ， 不 允许 为 负 值 
min-width 元 素 最 小 宽度 ， 默 认 值 为 0， 可 以 使 用 长 度 值 和 百分比 ， 不 允许 为 负 值 


贺 10.1 CSS(dimension) html， 说 明了 CSS 尺寸 属性 的 用 法 ， 如 图 10.11 所 示 。 


次 各 向 梳 坟 休 了 高 的 段落 。 
认 行 高 大 约 是 1。 这 是 拥有 
和 


ED 


这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 


图 10.11 CSS(dimension).html 示意 图 


源 代码 如 下 : 
<head> 
<title>Dimension 尺寸 </title> 
<style> 
p {max-width: 200px;} 
p-.small {line-height: 0.5;} 
p.big {line-height: 2;} 
</style> 
</head> 
<body> 
<p> 这 是 拥有 标准 行 高 的 段落 。 默 认 行 高 大 约 是 1。 这 是 拥有 标准 行 高 的 段落 。</P> 
<p class="small"> 这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 
行 高 。 </p> 
<p class="big"> 这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 
高 。</p> 
</body> 
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通过 设置 图 像 宽度 值 为 100%， 就 可 以 让 图 像 随 容器 宽度 自动 缩放 。 
圆 10.12 Css3(img-max-width).html， 说 明了 图 像 随 容器 宽度 自动 缩放 的 用 法 ， 如 
图 10.12 所 示 。 


图 10.12 ”CSS3(img-max-width).html 示意 图 


源 代码 如 下 : 


<head> 
<title> 图 像 自 动 缩放 </title> 
<style> 
.big{width: 400px;height: 260px; border: lpx solid #000000;} 
.small{width: 200px;height: 130px; border: lpx solid #000000; 
margin-bottom: Spx;} 
img{width: 100%;} 
</style> 
</head> 
<body> 
<div class="small"> 
<img src="images/sara.jpg" alt=""> 
</div> 
<div class="big"> 
<img src="images/sara.jpg" alt=""> 
</div> 
</body> 


10.8 ”表格 


10.8.1 表格 的 属性 


表 10.29 列 出 了 CSS 表格 属性 。 
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表 10.29 CSS 表格 属性 
属 性 描 述 
border-collapse | 是 否 把 表格 边框 和 单元 格 边 框 合并 为 单一 的 边框 
相 邻 单元 格 边 框 间 的 距离 (用 于 separated borders 模型 ) 
表格 标题 的 位 置 
是 否 显示 表格 中 的 空 单元 格 ( 用 于 separated borders 模型 ) 
设置 显示 单元 格 、 行 和 列 的 算法 规则 


border-spacing 


caption-side 


empty-cells 


table-layout 


@ border-collapse 属性 
border-collapse 属性 设置 表格 的 边框 和 单元 格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 。 
表 10.30 列 出 了 border-collapse 属性 值 。 


表 10.30 ”border-collapse 属性 值 


值 描 述 
separate | 默认 值 ， 边 框 分 离 ， 不 会 忽略 border-spacing 和 empty-cells 属性 
collapse 边框 合并 为 一 个 单一 的 边框 


例如 为 表格 设置 合并 边框 模型 : 

table{border-collapse:collapse;} 

@ border-spacing 属性 

border-spacing 属性 设置 相 邻 单元 格 的 边框 间 的 距离 。 在 指定 的 两 个 长 度 值 中 , 第 1 个 
是 水 平 间 隔 ， 第 2 个 是 垂直 间隔 ， 如 果 只 有 一 个 值 ， 那 么 定义 的 是 水 平和 垂直 间距 ， 注 意 
不 允许 使 用 负 值 。 

例如 为 表格 设置 border-spacing: 


table{border-collapse:separate;border-spacing:10px 50px;} 


@ table-layout 属性 
table-layout 属性 用 来 设置 显示 表格 单元 格 、 行 和 列 的 算法 规则 。 表 10.31 列 出 了 
table-layout 属性 值 。 
表 10.31 table-layout 属性 值 


值 描述 
automatic 默认 值 ， 列 宽度 由 单元 格 内容 设 定 
fixed 列 宽 由 表格 宽度 和 列 宽度 设 定 


。 automatic〈 自 动 ): 列 的 宽度 是 由 列 单元 格 中 没有 折 行 的 最 宽 的 内 容 设 定 的 。 此 算 
法 有 时 会 较 慢 ， 因 为 在 确定 最 终 布局 之 前 需要 访问 表格 的 所 有 内 容 。 

。 fixed (固定 ): 水 平 布局 仅 取决 于 表格 宽度 、 列 宽度 、 表 格 边框 宽度 和 单元 格 间距 ， 
与 单元 格 的 内 容 无 关 。 

固定 算法 比较 快 ， 但 是 不 太 灵活 ， 而 自动 算法 比较 慢 。 

例如 设置 表格 布局 算法 : 


table{table-layout:fixed;} 
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10.8.2 ”表格 的 边框 控制 


用 CSS 控制 表格 的 最 大 便利 是 能 够 灵活 地 控制 表格 的 边框 。 
.13 CSS(table-1).html， 列 出 了 经 常 使 用 的 各 种 边框 ， 如 图 10.13 所 示 。 


细 边 框 细 线 表格 


粗 边 框 细 线 表格 


图 10.13 CSS(table-1).html 示意 图 


源 代码 如 下 : 


<head> 

<title>table 边框 </title> 

<style> 
/* 合 并 相 邻 边框 */ 
table {border-collapse: collapse;width: 100%;} 
.table2 {border: #000 3px solid;} 
.tablel td, .table?2 td, .table4 td, .table5 td {border: #000 lpx solid;} 
.table3 td {border: #000 lpx dashed;} 
-table4 {border: #000 3px double;} 
-table6 {border-top: #000 lpx solid;} 
/* 定 义 表格 内 单元 格 之 间 的 间距 */ 


-table5 {border-collapse: separate;border-spacing: 10px;} 
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-table6 td {border-bottom: #000 lpx solid;} 
</style> 
</head> 
<body> 
<p> 细 边框 细 线 表格 </p> 
<table class="tablel"> 
<tr> 
<td>gnbsp;</td> 
<td>gnbsp;</td> 
KWEE> 
E> 
<td>gnbsp;</td> 
<td>gnbsp; </td> 
</Er> 
</table> 
<p> 粗 边框 细 线 表格 </p> 
<table class="table2"> 
<tr> 
<td>gnbsp;</td> 
<td>gnbsp;</td> 
> 
<tr> 
<td>gnbsp;</td> 
<td>gnbsp;</td> 
</tr> 
</table> 
<p> 虚 线 表格 </p> 
<table class="table3"> 
<tr> 
<td>gnbsp;</td> 
<td>gnbsp;</td> 
由 加 字 > 
下 
<td>gnbsp;</td><td>gnbsp;</td> 
</Er> 
</table> 
<p> 双 线 表格 </p> 
<table class="table4"> 
<tr><td>gnbsp;</td><td>gnbsp;</td></tr> 
<tr><td>gnbsp;</td><td>g&nbsp;</td></tr> 
</table> 
<p> 宫 字 表 格 </p> 
<table class="table5"> 
<tr><td>gnbsp;</td><td>gnbsp;</td></tr> 
<tr><td>gnbsp; </td><td>gnbsp;</td></tr> 
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</table> 

<p> 单 线 表格 </p> 

<table class="table6"> 
<tr><td>gnbsp; </td><td>gnbsp; </td></tr> 
<tr><td>gnbsp;</td><td>gnbsp; </td></tr> 

</table> 

</body> 

</body> 


10.8.3 ”改善 表格 的 显示 效果 


用 CSS 来 改善 表格 的 显示 样式 ， 使 其 达到 一 定 的 效果 ， 一 般 采 用 下 列 原则 ; 

(1) 标题 行 与 数据 行 的 区 分 可 以 通过 不 同 背 景色 来 实现 。 

(2) 标题 行 与 数据 行文 本 的 区 分 可 以 通过 定义 字体 、 大 小 和 粗细 等 文本 属性 来 实现 。 
(3) 为 了 避免 产生 读 错 行 现象 ， 可 以 适当 增加 行 高 或 交替 定义 不 同 背景 色 来 实现 。 
加 10.14 Css(table-2).html， 实 现 了 上 述 原则 的 部 分 效果 ， 如 图 10.14 所 示 。 


视频 讲解 


图 10.14 CSS(table-2).html 示意 图 
源 代码 如 下 : 
<head> 
<title>table 显示 效果 </title> 
<style> 
/* 合 并 相 邻 边框 */ 


.table {border-collapse: collapse;width: 100%;} 
tr, td, th {border: lpx #000 solid;} 
.table th {background: #888;color: #FFF;} 
/* 定 义 交替 行为 不 同 背 景色 */ 
-table .rl {background: #AAA;} 
/* 定 义 交替 行为 不 同 背 景色 */ 
-table .r2 {background: #CCC;} 
/* 通 过 伪 类 定义 mouse 经 过 时 行 背 景 改变 达到 动态 效果 */ 
.table tr:hover {background: #EEE;} 
</style> 
</head> 
<body> 
<table class="table"> 
<tr> 
<th> 标 题 </th> 
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<th> 标 题 </th> 
/> 
<tr Class="r1™> 
<td> 内 容 </td> 
<td> 内 容 </td> 
KNEE 
<tr class="r2"><td> 内 容 </td><td> 内 容 </td></tr> 
<tr class="rl"><td> 内 容 </td><td> 内 容 </td></tr> 
<tr class="r2"><td> 内 容 </td><td> 内 容 </td></tr> 
</table> 
</body> 
</body> 


10.8.4” 果 采 书店 “购物 车 ”页 面 的 表格 样式 设计 


启动 WebStorm, 打开 叮 叮 书店 项 目 cartl.html (在 第 6 章 的 6.3 节 建 立 )。 进 入 编辑 区 ， 
在 head 元 素 里 定义 内 部 样式 表 ， 如 图 10.15 所 示 。 


购物 车 


名 称 单价 数量 


合计 


国 《深度 学 习 》 


区 《Hadoop 权 威 指南 。 大 数据 的 存储 与 分 析 》 


大 xmsakksam 


3 件 商品 总 价 〈 不 育 运 费 ) ， 王 300. 00 


图 10.15 ”cartl.html 示意 图 


源 代码 如 下 : 


<style> 
.cart-table h2{margin: lrem 0;} 
/* 合 并 边框 */ 
.Cart-table table{font-size:1.2rem;width: 100%;border-collapse:collapse; 
margin: 10px Opx; color:hsl (0,0%,0%);} 
.Cart-table tr,.cart-table td{border:lpx solid hsl(20,30%,50%);} 
.Cart-table td h3{font-size:1.2rem;color:hsl (0,0%,0%);} 
.Cart-table img{width:60px;height:60px;} 
.cart-table td:first-child{text-align: center;} 
.cart-table td:nth-child(5), .cart-table td:nth-child(4), .cart-table 
td:nth-child(3) {text-align: right;padding-right: 5px;} 
.Cart-table tr:last-child af{color:hsl(0,20%,30%);font-size: 1.lrem; 
text-decoration: none;margin-left: 20px;} 
.cart-table tr:last-child a:hover{color:hsl1 (0,0%,100%);} 
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/* 第 1 行 和 最 后 一 行 背景 色 */ 
-Cart-table tr:first-child, .cart-table tr:last-child{background-color: 
hsl1 (20,30%,50%);line-height: 40px; text-align: center;color:hsl(0, 
0%,100%);} 

</style> 


10.9 叮 叮 书店 首页 的 外 观 样式 设计 


启动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html 和 外 部 样式 表 文 件 
style.css (在 第 9 章 的 9.5 节 建 立 )， 定 义 外 观 样式 。 
打开 样式 表 文 件 style.css， 进 入 编辑 区 ， 按 下 面 的 内 容 设 计 样 式 。 


10.9.1 文本 视频 讲解 


h2 的 字体 大 小 设 为 1.2rem; h3 的 字体 大 小 设 为 1.lrem， 居 中 对 齐 ; p、a、span 的 字 
体 大 小 设 为 lrem; 段落 首 行 缩 进 两 个 字 ， 分散 对 齐 ; 清除 列表 项 目标 记 ， 页 面 显示 效果 如 
图 10.16 所 示 。 


首页 
特刊 降价 


《HTML5 权 威 指南 》 
作为 下 一 代 Web 标 准 ， 致力 于 为 

互联 网 开发 者 搭建 更 加 便捷 、 开 放 的 沟通 平 

台 。 业 界 普 遍 认 为 ， 在 未 来 几 年 内 ， 

无 疑 构成 为 移动 互联 网 领域 的 主宰 者 。 本 书 是 

2 HTMIS 系统 学 习 网 页 设计 和 移动 设计 的 参考 图 书 。 

a 本 Adam Freeman . 曾 在 多 家 名 企 担任 高 
级 职务 ， 现 为 畅销 技术 图 书 作家 ， 著 有 多 部 
C#、.NET 和 Java 方 面 的 大 部 头 作品 。 其 中 
《ASP.NET 4 高 级 程序 设计 ( 第 4 版 ) 》、 
《精通 ASP.NET MVC 3 框架 ( 第 3 版 ) 》 销 量 
均 在 同 品种 中 和 名列前茅， 备 受 读者 推 岩 。 
Freeman 专 门 为 网 页 开发 新 手 和 网 页 设计 师 打 
造 的 经 典 参 考 书 ， 这 本 书 冬 承 作者 的 一 贯 风 
格 ， 顷 蒜 风 二 、 简 约 凝 练 、 逐 辑 性 强 ,是 广大 
Web 开 发 人 员 的 必 读经 典 .。 

加 入 欢 物 车 详细 内 容 


《JavaScript 权 威 指 南 》 


ST 经 典 的 JavaScript 工 具 书 ， 从 1996 年 以 
来 ， 本 书 已 经 成 为 JavaScript 程 序 员 心中 的 
《圣经 》。 


David Flanagan ,是 一 名 程序 员 ， 也 是 
一 名 作家 .他 在 O′”Reilly 出 版 的 其 他 起 销 书 
还 包括 《JavaScript Pocket Reference》、 

《The Ruby Programming Language》 


以 及 Uava in a Nutshell》。David 毕 业 于 麻 
省 理工 学 院 ， 获 得 计算 机 科学 与 工程 学 位 . 他 
和 妻子 、 孩 子 一 起 生活 在 西雅图 和 温哥华 之 间 


要 下 所 商 Ke 
的 美国 太平 洋 西北 海岸 。 深度 学 习 [deep learning] ¥43.50 
¥52.00 


图 10.16 叮 叮 书 店 首页 示意 图 (文本 ) 
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/* 文 本 */ 
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h2 {font-size:1.2rem; font-weight: normal;color: hsl(20,50%,30%);} 


/*h3 标题 内 容 居 中 */ 


h3 {font-size:1.lrem; font-weight: normal;display: flex; justify-content: 


center margin: 0.5rem 0;color: hsl(20,50%,30%);} 


.recommend-book h3{font-weight: bolder;} 
p, a, span {font-size:lrem} 
/* 段 落 首 行 缩 进 两 个 字 ， 分 散 对 齐 */ 
p {text-indent:2rem;text-align: justify;} 


/* 清 除 列表 项 标记 */ 


ul{list-style-type: none;} 
mark{background-color: hsl(20,30%,50%);color: hsl(0,0%,100%);} 


10.9.2 


不 旦 . 
月 未 


页 眉 背 景 图 像 设 为 “images/header.png”， 导 航 菜单 背景 图 像 设 为 “images/navbg.jpg”， 
页 脚 导 航 背 景 图 像 设 为 “images/navbg.jpg”， 页 面 显示 效果 如 图 10.17 所 示 。 


本 周 推荐 


S 素 ,本 书 已 经 成 为 JavaScript 程 序 员 心中 的 


《HTMLS5 权 威 指南 》 


作为 下 一 代 Web 杯 性 ， 四 TI 致力 于 为 
互联 网 开发 者 措 建 更 加 便于 、 开 放 的 沟通 于 
台 。 业 蜡 壮 浓 兴 为 ， 在 3 mE 
无 颖 构成 为 移动 互 联 风流 


NET 和 Java 方 面 的 大 部 头 作品 其 
《ASP.NET 4 高 级 程序 设计 ( 第 4 版 ) 》、 
《精囊 ASP NET MVC 3 柜 昔 (第 3 版 ) 》 钠 呈 

均 在 同 品种 中 名列前茅 ， 备 受 读者 推崇 。 


《JavaScript 权 威 指南 } 
经 内 的 JavaScript 工 具 书 ， 从 1996 年 以 


David Flanagan , 是 一 名 程序 员 , 也 是 
ye Pe 


源 代码 如 下 : 
/* 页 局 */ 


图 10.17 叮 叮 书店 首页 示意 图 (背景 ) 


快 通 入 行 前 
成 训 开 发 可 手 丰 人 
fi 


J 


| 


header{height: 150px;background-image:url ("images/header.png") ;position: 
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relative;} 

/* 导 航 菜 单 */ 

#nav{ background-image:url ("images/navbg.jpg");} 

/* 页 脚 导航 */ 

#footer-wrapper{ background-image:url ("images/navbg.jpg");} 
} 


10.9.3 ”栏目 标题 图 标 


栏目 标题 图 标 使 用 服务 器 端 字体 方式 ， 引 用 多 种 格式 ， 以 满足 不 同 设备 和 浏览 器 的 
需要 。 
源 代码 如 下 : 
/* 栏 目标 题 图 标 ， 引 用 多 种 格式 ， 以 满足 不 同 设备 和 浏览 器 的 需要 */ 
/* 定 义 服务 器 端 使 用 的 图 标 字 体 */ 
@font-face { 
font-family: 'FontAwesome'; 


src: urll('fonts/fontawesome-webfont.eot?v=4.7.0°'); 
src: url('fonts/fontawesome-webfont .eot?#iefixg&v=4.7.0') format ('embedded- 
opentype'), url('fonts/fontawesome-webfont .woff2?v=4.7.0') format ('woff2°'), 
Url ('fonts/fontawesome-webfont .woff?v=4.7.0') format('woff'), url('fonts/ 
fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/ 
fontawesome-webfont .svg?v=4.7.0#fontawesomeregular') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 
/* 设 置 栏目 标题 图 标 样式 */ 
.icon-book, .icon-sale, .icon-new, .icon-sell, .icon-classify, .icon-partner, 
.icon-about, .icon-cart, .icon-contact { 
font-family: FontAwesome; font-size: 1.5rem;display: flex;align-items: center; 
float: left; margin-right: 0.S5rem;font-weight: normal;color: hsl (20, 50%, 30%); 
} 


/* 本 周 推荐 标题 图 标 */ 

.icon-book:before {content: "\f02d";} 
/* 最 近 新 书 标题 图 标 */ 

.icon-new:before {content: "\f£f044";} 
/* 最 近 促 销 标题 图 标 */ 

.icon-sale:before {content: "\f295";} 
/* 畅 销 图 书 标题 图 标 */ 

.icon-sell:before {content: "\f073";} 
/* 图 书 分 类 标题 图 标 */ 
.icon-classify:before {content: "\f£f022";} 
/* 合 作 伙伴 标题 图 标 */ 


.icon-partner:before {content: "\f2b5";} 
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/* 关 于 书店 标题 图 标 */ 

.icon-about:before {content: "\f143";} 

/* 联 系 我 们 标题 图 标 ， 在 contact .html 页 面 上 */ 

-Icon-contact:before {content: "\f199";} 

打开 叮 叮 书店 项 目 首页 index.html， 进 入 代码 编辑 区 ， 将 光标 定位 到 <section 
id-wrecommend"> 后 面 按 回 车 键 ， 输 入 下 面 的 标签 ， 为 本 周 推荐 栏目 添加 标题 图 标 。 


<span class="icon-book"></span> 


将 光标 定位 到 <section id="new"> 后 面 按 回 车 键 ， 输 入 下 面 的 标签 ， 为 最 近 新 书 栏目 添 
加 标题 图 标 。 


<span class="icon-new"></span> 

将 光标 定位 到 <section id="sales"> 后 面 按 回 车 键 , 输入 下 面 的 标签 , 为 最 近 促销 栏目 添 
加 标题 图 标 。 

<span class="icon-sale></span> 

将 光标 定位 到 <section id="best-selling"> 后 面 按 回 车 键 ， 输 入 下 面 的 标签 ， 为 畅销 图 书 
栏目 添加 标题 图 标 。 

<span class="icon-sell"></span> 

将 光标 定位 到 <section id="classify"> 后 面 按 回 车 键 , 输入 下 面 的 标签 , 为 图 书 分 类 栏目 
添加 标题 图 标 。 


<span class="icon-classify"></span> 
将 光标 定位 到 <section id="partner"> 后 面 按 回 车 键 , 输入 下 面 的 标签 ， 为 合作 伙伴 栏目 
添加 标题 图 标 。 
<span class="icon-partner"></span> 
将 光标 定位 到 <section id="about"> 后 面 按 回 车 键 ， 输 入 下 面 的 标签 ， 为 关于 书店 栏目 
添加 标题 图 标 。 

<span class="icon-about"></span> 

将 光标 定位 到 <div id="cart"> 后 面 按 回 车 键 ， 输 入 下 面 的 标签 ， 为 购物 车 添加 标题 
图 标 。 


<span class="icon-cart"></span> 


10.9.4 其 他 


进入 样式 表 文 件 style.css 的 编辑 区 ， 定 义 夫 ogo 样式 ， 使 用 绝对 定位 确定 位 置 。 
源 代 码 如 下 : 
/* 网 站 10go 使 用 绝对 定位 确定 位 置 */ 
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#1logo{position:absolute;top:30px; left:75px;} 


#1l0go a{font-size:1.2rem;color: 


#1ogo a hl{font-weight: 
/* 边 栏 广告 图 像 的 最 小 宽度 为 260pzx*/ 
#advert img{min-width: 260px;} 
/* 关 于 书店 图 像 的 最 大 宽度 为 120px*/ 


#about img{max-width: 120px;margin-bottom: lrem;} 


#about .content{margin-top: 


normal;} 


lrem;} 


页 面 外 观 显示 效果 如 图 10.18 所 示 。 


10.10 


本 章 主要 介绍 了 CSS 的 常 


向 本 同 推荐 


而 叮 书店 


《HTML5 权 威 指南 》 


图 10.18 


小 结 


作为 下 一 代 Web 标 准 ， 国 IIB 
开发 者 拱 娃 更 加 便 
平台 ， 业 界 普遍 认 


Adam Freeman ， 曾 在 全 家 名 
企 二 任 高 级 职务 ， 现 为 声 钳 技术 医书 
作家 ， 香 有 杀 部 C#、.NET 和 Java 方 
面 的 大 部 头 作品 。 其 中 《ASP.NET 4 


离 级 程序 设计 《 第 4 版 ) 》、《 精 通 


hsl1 (20,50%,30%) ;text-decoration:none;} 


(Es 


= he 


min 


叮 叮 书店 首页 示意 图 (其 他 ) 


用 属性 ， 包 括 文 本 、 斑 


景 、 列 表 、 字 体 、 尺 寸 、 表 格 等 ， 


后 详细 介绍 了 叮 叮 书店 首 页 元 素 外 观 的 设计 和 实现 过 程 。 


10.11 


习题 


@ 选择 题 


(1) 关于 背景 


A. 


局 


局 


B. 
C, 
D 
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[以 对 一 
[以 对 一 


属性 ， 下 列 说 法 中 不 正确 的 是 
可 以 通过 背景 相关 属性 改变 背景 图 片 的 
个 元 素 设置 两 张 背景 图 片 

个 元 素 同时 设置 背景 颜色 和 背 
. 在 默认 情况 下 背景 图 片 会 平 铺 ， 左 上 角 对 齐 


)。 
原始 尺寸 大 小 


景 图 片 
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(2 


bea 


下 列 选项 中 不 属于 CSS 文本 属性 的 是 )。 

A. font-size B. text-transform 

C. text-align D. line-height 

以 下 样式 属性 可 以 控制 字体 大 小 的 是 . 

A. text-size B. font-size C. text-style D. font-style 
(4) 下 面 不 是 CSS3 增加 的 背景 属性 的 是 和 

A. background-origin 


(3 


sy 


B. background-clip 
C. background-size 
D. background-attachment 


(5) 以 下 关于 CSS 样式 中 文本 属性 的 说 法 ， 错 误 的 是 ( Ys 
A. font-size 用 来 设置 文本 的 字体 大 小 
B. font-family 用 来 设置 文本 的 字体 类 型 
C. color 用 来 设置 文本 的 颜色 
D. text-align 用 来 设置 文本 的 字体 形状 
(6) 定义 外 边框 为 双 线 表格 ， 以 下 选项 中 正确 的 是 )。 
A. table{border: #000 3px double:} 
B. table{border: #000 3px solid;} 
C. td{border: #000 3px double;} 
D. td{border: #000 3px solid:} 
(7) 以 下 选项 中 ， 用 来 设置 背景 图 像 的 起 始 位 置 的 样式 属性 是 ( 。 )。 
A. background-image B. background-repeat 
C. background-position D. background-url 
(8) 以 下 声明 中 ， 可 以 取消 加 粗 样式 的 是 )。 


A. font-weight:bolder:; 
C. font-weight:normal; 
(9) 关于 text-indent， 下 列 描述 错误 的 是 
A. text-indent: 20px; . text-indent:-20px:; 
C. text-indent:left:; . text-indent:2em:; 
(10) 以 下 声明 中 ， 可 以 隐藏 对 象 的 是 )。 
A. display:block 
C. display:none 
@ 简 答题 
(1) 为 什么 使 用 CSS3 服务 器 端 字体 ? 
(2) 如 果 要 使 网 页 中 的 背景 图 片 不 随 网 页 滚动 ， 应 设置 CSS 的 什么 属性 ? 
(3) 如 何 去 掉 列表 中 的 标志 ? 
(4) 设 定 文本 字体 的 一 般 性 原则 是 什么 ? 
(5) CSS3 如 何 创建 多 列 来 显示 文本 ? 


. font-weight:bold; 
. font-weight:600; 
)。 


已 四 一 口 台 


凶 


. display:inline 


已 


. display:inline-block 
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伪 类 和 伪 元 素 也 是 一 种 选择 器 ， 在 页 面 中 根据 元 素 的 特殊 状态 来 选取 元 素 。 伪 类 和 伪 
元 素 是 预定 义 的 、 独 立 于 文档 元 素 的 。 它 们 获取 元 素 的 途径 不 是 基于 id、class 或 属性 这 些 
基础 的 元 素 特征 ， 而 是 根据 元 素 是 否 处 于 特殊 状态 ( 伪 类 )， 或 者 是 元 素 中 特别 的 内 容 ( 伪 
元 素 )。 本 章 主要 介绍 CSS 伪 类 和 伪 元 素 。 

本 章 要 点 : 

寻 CSS 伪 类 。 

如 CSS 伪 元 素 。 


11.1 CSS 伪 类 


伪 类 是 一 种 选择 器 ，CSS 伪 类 用 于 向 某 些 选 择 器 添加 特殊 的 样式 效果 ， 伪 类 选择 元 素 
基于 当前 元 素 处 于 的 状态 ， 或 者 说 元 素 当前 所 具有 的 特性 。 伪 类 是 CSS 已 经 定义 好 的 能 够 
被 支持 CSS 的 浏览 器 自动 识别 的 特殊 选择 器 。 其 语法 如 下 : 

selector:pseudo-class{property:value} 

pseudo-class 是 伪 类 。 

伪 类 经 常 与 CSS 类 配合 使 用 。 例 如 一 个 超 链接 ， 类 名 为 red: 

<a class="red" href="css (a) .html">css (a) .html</a> 

对 这 个 超 链接 设 定 样式 : 


a.red:visited{color:#FF0000;} 


如 果 上 面 的 超 链接 被 访问 过 ， 那 么 它 将 显示 为 红色 。 
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a 
a 
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超 链接 伪 类 


超 链接 伪 类 是 最 常见 的 伪 类 选择 器 ， 在 浏览 器 中 ， 超 链接 的 不 同 状态 可 以 用 不 同 的 方 
式 显示 ， 这 些 状 态 包括 未 被 访问 状态 、 已 被 访问 状态 、 鼠 标 悬 停 状态 和 活动 状态 ， 这 些 状 
态 的 显示 方式 可 以 用 伪 类 来 定义 ， 例 如 : 


:link{color:#FF0000;} /* 未 被 访问 超 链接 #/ 
:visited{fcolor:#00FF00;} V/* 已 被 访问 超 链接 */ 
:hover{color:#FFOOFF;} /* 鼠 标 悬 停 */ 
:active{color:#0000FF;} ”/* 活 动 状态 ,鼠标 单 击 后 并 未 弹 起 */ 

在 CSS 定义 中 ，a:hover 必须 被 置 于 a:link 和 a:visited 之 后 才 有 效 ，a:active 必须 被 置 
于 ahover 之 后 才 有 效 ， 超 链接 伪 类 定义 的 顺序 简写 为 “LVHA”。 

提示 : :hover 和 :active 也 可 以 用 在 其 他 元 素 上 。 

加 111 CSS(a).html， 通 过 超 链 接 伪 类 对 4 个 超 链接 定义 了 不 同 的 状态 样式 ， 如 
图 11.1 所 示 。 


源 代码 如 下 : 


<head> 
<title> 超 链接 伪 类 </title> 
<style> 


a. 


pp po op pp pp pp py 


one: 


two: 
two: 


把 鼠标 移动 到 这 些 链接 上 查看 效果 ， 
个 链接 改变 颜色 


这 接 改变 字体 大 小 


改变 背景 颜色 


个 链接 改变 文本 装饰 


图 11.1 CSS(a).html 示意 图 


link {color: #FF0000;} 


:visited {color: #0000FF;} 
:hover {color: #FFCC00;} 
:link {color: #FF0000;} 


Visited {color: #0000FF;} 
hover {font-size: 150%;} 


three:link {color: #FF0000;} 
three:visited {color: #0000FF;} 
three:hover {background: #66FF66;} 


four:link {color: #FF0000;text-decoration: none;} 


four:visited {color: #0000FF;text-decoration: none;} 


four:hover {text-decoration: underline;} 
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</style> 
</head> 
<body> 
<p> 把 鼠标 移动 到 这 些 链 接 上 查看 效果 : </p> 
<p><a class="one" href="a.html"> 这 个 链接 改变 颜色 </a></p> 
<p><a class="two"” href="a.html"> 这 个 链接 改变 字体 大 小 </a></p> 
<p><a class="three" href="a.html"> 这 个 链接 改变 背景 颜色 </a></p> 
<p><a class="four"” href="a.html"> 这 个 链接 改变 文本 装饰 </a></p> 
</body> 


11.1.2 ”结构 性 伪 类 


结构 性 伪 类 会 在 元 素 存 在 某 种 结构 上 的 关系 时 选择 相应 的 元 素 应 用 CSS3 样式 。CSS3 
定义 的 结构 性 伪 类 选择 器 见 表 11.1。 


表 11.1 CSS3 结构 性 伪 类 选择 器 


伪 类 作 用 
:Toot 选择 文档 的 根 元 素 ， 在 HTML 中 ， 根 元 素 永 远 是 HIML 
:not(selector) | 选择 非 selector 元 素 的 每 个 元 素 
:empty 选择 没有 任何 子 元 素 〈 包 括 text 节点 ) 的 元 素 ， 即 元 素 没 有 任何 内 容 
ret 在 链接 中 URL 用 锚 点 # 可 以 指向 文档 内 某 个 具体 的 元 素 ， 这 个 被 链接 的 元 素 是 目标 元 


素 (target element)，:target 选择 器 用 于 选取 当前 活动 的 目标 元 素 


文档 的 根 元 | 


empty 
在 链接 中 URL 用 锚 点 # 可 以 指 


素 (arget element). 


target 
:target 选 择 器 用 于 选取 当前 
活动 的 目标 元 素 。 


图 11.2 ”CSS3(Structural).html 示意 图 
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源 代码 如 下 : 
<head> 
<title> 结 构 性 伪 类 </title> 
<style> 
*{margin: 0 auto;} 
/*html (不 包括 body) 背景 色 为 深 灰色 */ 
:root{background-color: #B4B4B4;} 
body{background-color: #FFFFFF;margin: 20px;} 
/* body 里 的 子 元 素 p〔 但 不 是 类 名 为 .pl1) 的 前 景色 为 红色 */ 
body>p:not (.p1) {color: #FF0000;} 
div{width:200px;height:150px;} 
/#* 没 有 任何 子 元 素 包括 内 容 ) 的 元 素 背景 色 为 红色 */ 
:empty{background-color: #FF0000;} 
/* 当 前 活动 的 目标 元 素 的 背景 色 为 黄色 */ 
:target {background-color: #ffff00;} 
a{display: inline-block;margin-top: 20px;} 
</style> 
</head> 
<body> 
<h1> 结 构 性 伪 类 root</h1> 
<p> 选 择 文档 的 根 元 素 。</p> 
<p class="pl"> 选 择 文档 的 根 元 素 。</p> 
<p> 选 择 文档 的 根 元 素 。</p> 
<div id="div"></div> 
<a href="#dl">target</a> 
<a href="#d2">target</a> 
<div id="dl"> 
<hl>empty</h1> 


<p> 在 链接 中 URL 用 锚 点 # 可 以 指向 文档 内 某 个 具体 的 元 素 ， 这 个 被 链接 的 元 素 是 目标 元 素 


(target element). </p> 
</div> 
<div id="d2"> 
<hl>target</h1l> 
<p>:target 选择 器 用 于 选取 当前 活动 的 目标 元 素 。</p> 
</div> 
</body> 
</body> 


11.1.3 子 元 素 伪 类 


子 元 素 伪 类 选择 器 也 属于 结构 性 伪 类 ， 只 不 过 这 些 伪 类 大 多 数 是 选择 元 素 里 的 子 元 


素 。 子 元 素 伪 类 选择 器 见 表 11.2。 
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表 11.2 CSS3 子 元 素 伪 类 选择 器 
伪 类 


E:first-child 父 元 素 的 第 1 个 子 元 素 EE 
E:last-child 


E:only-child 
E:nth-child(n) 


选择 父 元 素 的 第 mn 个 子 元 素 E 

选择 父 元 素 的 第 b 个 子 元 素 E， 以 它 为 起 点 每 阳 a 个 子 元 素 选 择 一 个 子 
元 素 E， 若 a 为 正 数 选 择 方向 向 下 ， 若 a 为 负数 选择 方向 向 上 

选择 父 元 素 的 倒数 第 n 个 子 元 素 E 


E:nth-child(an+b) 


E:nth-last-child(n) 


E:first-of-type 选择 同类 型 中 的 第 1 个 同 级 兄弟 元 素 E 
E:last-of-type 选择 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E 
E:only-of-type 选择 同类 型 中 的 唯一 的 一 个 同 级 兄弟 元 素 E 
E:nth-of-type(n) 选择 同类 型 中 的 第 ma 个 同 级 兄弟 元 素 E 
E:nth-last-of-type(n) 选择 同类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 EE 


贺 13 CSS3(child).html， 使 用 了 子 元 素 伪 类 ， 如 图 11.3 所 示 。 


子 元 素 伪 类 
。 子 rst-child 
h-child(2n) 
子 元 1d(2n) 
元 素 伪 类 -child 

标题 E:first-of-type 视频 讲解 
内 容 
标题 E:nth-of-type(zm) 
内 容 
标题 
内 容 
标题 E:nth-of-type(2n)) 
内 容 
标题 E:first-of-type 
内 容 Eonly-oftype 


图 11.3 CSS3(child).html 示意 图 


源 代码 如 下 : 


<head> 
<title> 结 构 性 伪 类 - 子 元 素 伪 类 </title> 
<style> 
div li:first-child{color: #009900;} 
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div li:last-child {color: #FF0000;} 
div li:nth-child(2n) {color: #3444FF;} 
div li:nth-last-child(1) {color: #999999;} 
h2:first-of-type{background-color: #ACB451;} 
h2:nth-of-type (2n) {background-color: #13B8BA;} 
p:only-of-type{background-color: #999999;} 
span{height: 2rem; width: 2rem; background-color: blue;display: 
inline-block;} 
/* 从 第 3 个 span 元 素 开始 ， 每 隔 两 个 设 定 样式 */ 
span:nth-child(2n+3) {color: #F90; border-radius: 50%;} 
</style> 
</head> 
<body> 
<h1> 子 元 素 伪 类 </h1> 
<div> 
<ul> 
<1i> 子 元 素 伪 类 选择 符 E:first-chilq</1i> 
<1i> 子 元 素 伪 类 选择 符 E:nth-child (2n)</1i> 
<1i> 子 元 素 伪 类 选择 符 E:nth-last-child(3)</1i> 
<1i> 子 元 素 伪 类 选择 符 E:nth-child (2n)</1i> 
<1i> 子 元 素 伪 类 选择 符 E:1last-chilq</1i> 
</ul> 
</div> 
<div> 
<h2> 标 题 E:first-of-type</h2> 
<p> 内 容 </p> 
<h2> 标 题 E:nth-of-type (2n) </h2> 
<p> 内 容 </p> 
<h2> 标 题 </h2> 
<p> 内 容 </p> 
<h2> 标 题 E:nth-of-type (2n) </h2> 
<p> 内 容 </p> 
</div> 
<div> 
<h2> 标 题 E:first-of-type</h2> 
<p> 内 容 E:only-of-type</p> 
</div> 
<div> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
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<span></span> 


<span></span> 


<span></span> 


</div> 
</body> 


11.1.4 UI 元 素 状 态 伪 类 


UI 元素 状 态 (User Interface， 用 户 界 面 ) 伪 类 是 指 当 元 素 处 于 某 种 状态 时 选择 该 元 素 
应 用 CSS 样式 ， 在 默认 状态 下 不 起 作用 。CSS3 已 经 定义 的 UI 元 素 状态 伪 类 选择 器 共有 
17 种 ， 见 表 11.3。 


伪 类 
E:hover 
E:active 
E:focus 
E:enabled 
E:disabled 
E:read-only 
E:read-write 
E:checked 


E:default 


E:indeterminate 


E::selection 


表 11.3 UI 元 素 状态 伪 类 选择 器 
作 用 

当 鼠 标 指针 移动 到 元 素 上 面 时 元 素 所 使 用 的 样式 
元 素 被 激活 〈 鼠 标 在 元 素 上 按 下 没有 松 开 ) 时 使 用 的 样式 
元 素 获 得 焦点 时 使 用 的 样式 
当 元 素 处 于 可 用 状态 时 的 样式 
当 元 素 处 于 不 可 用 状态 时 的 样式 
当 元 素 处 于 只 读 状 态 时 的 样式 。 企 需要 加 -moz- 前 绷 
当 元 素 处 于 读 写 状态 时 的 样式 。 任 需要 加 -moz- 前 级 
表单 的 单 选 按钮 或 复 选 框 处 于 选取 状态 时 的 样式 。 企 需要 加 -moz- 前 级 
当 页 面 打开 时 默认 处 于 选取 状态 的 单 选 按钮 或 复 选 框 的 样式 。 即 使 用 户 将 默认 设 定 
为 选取 状态 的 单 选 按钮 或 者 复 选 框 修改 为 非 选取 状态 , E:default 选择 器 设 定 的 样式 依 
当 页 面 打 开 时 ， 一 组 单 选 按钮 中 的 任何 一 个 单 选 按钮 都 没有 设 定 为 选取 状态 时 的 整 
组 的 单 选 按钮 的 样式 ， 如 果 用 户 选中 这 组 中 的 任何 一 个 单 选 按钮 ， 那 么 整 组 的 单 选 
按钮 的 样式 被 取消 
当 元 素 处 于 选中 状态 时 的 样式 。 任 需要 加 -moz- 前 级 
当 元 素 内 容 不 能 通过 元 素 的 required 等 属性 所 指定 的 检查 或 元 素 内 容 不 符合 元 素 规 


E:invalid 定 的 格式 (例如 使 用 type 属性 值 为 Email 的 input 元素 ， 限 定 元 素 内 容 必须 为 有 效 的 
Email 格式 ) 时 的 样式 
当 元 素 内 容 能 通过 元 素 的 required 等 属性 所 指定 的 检查 或 元 素 内 容 符 合 元 素 规定 的 
E:valid 格式 (例如 使 用 type 属性 值 为 Email 的 input 元 素 , 限定 元 素 内 容 必须 为 有 效 的 Email 
格式 ) 时 的 样式 
指 允 许 使 用 required 属性 ， 而 且 已 经 指定 required 属性 的 input、select 及 textarea 元 
E:required > 
素 的 样式 
指 允 许 使 用 required 属性 ， 而 且 未 指定 required 属性 的 input、select 及 textarea 元 素 
E:optional 的 样式 
E:in-range 指 当 元 素 的 有 效 值 被 限定 在 一 个 范围 之 内 ， 且 实际 的 输入 值 在 该 范围 之 内 时 的 样式 


E:out-of-range 


指 当 元 素 的 有 效 值 被 限定 在 一 个 范围 之 内 ， 但 实际 输入 值 超过 时 使 用 的 样式 


到 目前 为 止 ， 这 17 种 选择 器 被 浏览 器 支持 情况 如 表 11.4 所 示 。 
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表 11.4 ”UI 元 素 状态 伪 类 选择 器 被 浏览 器 支持 情况 


选 择 器 Firefox Safari Opera IE Chrome 
E:hover y y y y y 
E:active y y y x y 
E:focus y y y y 
E:enabled y y y x y 
E:disabled y y x y 
E:read-only y y y x y 
E:read-write y y y x 六 
E:checked y y y x y 
E::selection y y y x y 
E:default y x y x x 
E:indeterminate x x y x x 
E:invalid y y x y 
E:valid 六 y x y 
E:required y x y 
E:optional y y x y 
E:in-range y y x y 
E:out-of-range y | y 


加 .4 CSS3(UD.html， 使 用 了 UI 元素 状态 伪 类 ， 如 图 11.4 所 示 。 


UI 伪 类 


鼠标 移动 上 去 文本 框 背景 颜色 变 成 绿色 ， 鼠 标 单 击 〈 按 住 不 
放 J) 音 景 颜色 变 成 蓝 色 ， 获 得 焦点 背景 颜色 变 成 红色 。 


文本 框 可 用 时 背景 颜色 变 成 绿色 。 

文本 框 不 可 用 时 背景 颜色 变 成 灰色 。 大 DR 
选中 

默认 选中 国 

都 没 选中 国 男 国 女 


文本 框 可 读 写 。 
文本 框 只 读 。 
选择 的 文字 背景 会 变 成 红色 。 


输入 符合 email 格 式 的 字符 ss 
输入 任意 字符 | 
输入 1 到 100 之 内 的 数值 


图 11.4 CSS3(UD html 示意 图 


源 代码 如 下 : 


<head> 
<title>UI 伪 类 </title> 
<style> 
#tl1:hover{background-color:#00FF00;} 
/* 不 使 用 : focus 时 可 以 看 到 效果 */ 
#t1l:active{background-color:#0000FF;} 
#t1:focus{background-color:#FF0000;} 
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#t2:enabled{background-color:#00FF00;} 

#t3:disabled{background-color: #B4B4B4;} 

input[id^="c"] {width: 15pxzheight: 15px;} 

#cl:checked{outline: solid 2px #FF0000;} 

input [type="checkbox"] :default{outline:2px solid #FF0000;} 

input [type="radio"] :indeterminate{outline: solid 2px #0000FF;} 

#t4:-moz-read-write{background-color: #7014C6;} 

#t4:read-write{background-color: #7014C6;} 

#t5:-moz-read-only{background-color: #13B8BA;} 

#t5:read-only{background-color: #13B8BA;} 
::-moz-selection{background-color: red;} 

p::selection{background-color: red;} 

input [type="email"] :valid{background-color: red;} 

input [type="email"] :invalid{background-color:#BBBBBB;} 

input [type="text"] :required{border-color: red;} 

input [type="text"] :optional{border-color:#00FF00;} 

input [type="number"] :in-range{background-color: white;} 

input [type="number"] :out-of-range{background-color: red;} 

</style> 


</head> 

<body> 

<hl>UI 伪 类 </h1> 

<form action="HTML5 (form action) .html" method="get"> 


<div><labe1> 鼠 标 移动 上 去 文本 框 背景 颜色 变 成 绿色 ， 鼠 标 单 击 〈 按 住 不 放 ) 背景 颜色 变 成 
蓝 色 ， 获 得 焦点 背景 颜色 变 成 红色 。<input type="text" id="tl" name="t1"> 
</label></div> 

<div><label> 文 本 框 可 用 时 背景 颜色 变 成 绿色 。<input type="text" id="t2" name= 
"t2"></label></div> 

<div><labe1> 文 本 框 不 可 用 时 背景 颜色 变 成 灰色 。<input type="text" id="t3" name= 
"t3" disabled></label></div> 

<div><label> 选 中 <input type="checkbox" id="cl" name="cl"></label></div> 
<div><labe1> 默 认 选 中 <input type="checkbox" id="c2" name="c2" checked> 
</label></div> 

<div><label> 都 没 选中 </label><label><input type="radio" name="radio" 
value="male" /> 男 </label><label><input type="radio" name="radio" value= 
"female" /> 女 </label></div> 

<div><label> 文 本 框 可 读 写 。<input type="text" id="t4" name="t4"></label></div> 
<div><labe1l> 文 本 框 只 读 。<input type="text" id="t5" name="t5" readonly> 
</label></div> 

<p> 选 择 的 文字 背景 会 变 成 红色 。</p> 

<div><label> 输 入 符合 email 格式 的 字符 <input type="email" required></label></div> 
<div><labe1> 输 入 任意 字符 <input type="text" required></label></div> 
<div><label1> 输 入 1 到 100 之 内 的 数值 <input type=number min=0 max=100> 
</label></div> 


</form> 
</body> 
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11.2 CSS 伪 元 素 


伪 元 素 是 对 元 素 中 的 特定 内 容 进 行 操作 ， 操 作 的 层次 比 伪 类 更 深 一 层 。 实 际 上 ， 设 计 
伪 元 素 的 目的 是 选取 元 素 内 容 的 第 1 个 字 ( 母 ) 或 第 1 行 等 ， 完 成 选取 某 些 内 容 前 面 或 后 
面 这 种 普通 的 选择 器 无 法 完成 的 操作 。 其 所 控制 的 内 容 实际 上 和 元 素 是 相同 的 ， 但 它 本 身 
人 并 不 存在 于 文档 中 ， 所 以 叫 伪 元 素 。 伪 元 素 只 应 用 于 特定 元 素 上 。 
@ i 


selector: :pseudo-element {property:value;} 
pseudo-element 是 伪 元 素 ，CSS 定义 的 伪 元 素 见 表 11.5。 
表 11.5 伪 元 素 列表 


E:first-letter/E::first-letter 


E:first-line/E::first-line 
E:before/E::before 在 2 前 插入 某 些 内 容 ， 和 content 属性 一 起 使 用 
E:after/E::after 在 元 素 之 后 插入 某 些 内 容 ， 和 content 属性 一 起 使 用 


CSS3 将 伪 元 素 选择 符 前 面 的 单个 冒号 〈:) 修改 为 双 冒 号 〈::) 用 于 区 别 伪 类 选择 器 ， 
但 以 前 的 写法 仍然 有 效 。 

@ ::first-line 伪 元 素 

:first-line 用 于 向 文本 的 首 行 添加 特殊 样式 ， 但 只 能 用 于 块 状元 素 。 属 性 font、color、 

background、word-spacing、l]etter-spacing、text-decoration、vertical-align、text-transform 、 
line-height 和 clear 可 以 应 用 于 这 个 伪 元 素 。 

@ ::first-letter 伪 元 素 

:first-letter 伪 元 素 用 于 向 某 个 选择 器 中 的 文本 首 字母 添加 特殊 的 样式 。 属 性 font\color、 
background、margin、padding、border、text-decoration、vertical-align( 当 float 为 none 时 )、 
text-transform、line-height、float、clear 可 以 应 用 于 这 个 伪 元 素 。 

圆 11.5 Css(irst).html, 说 明了 :first-letter 和 :first-line 伪 元 素 的 用 法 , 如 图 11.5 所 示 。 


Re 伪 


只 应 用 特定 对 象 
伪 元 素 用 于 将 特殊 的 效果 
添加 到 某 些 选择 器 。 伪 元 素 只 应 用 特定 对 象 上 。 
图 11.5 CSS(first).html 示意 图 视频 讲解 
源 代码 如 下 : 
<head> 


<title>first-letter、first-line 伪 元 素 </title> 
<Style> 
p.letter: :first-letter {font-size: 200%; font-family: "黑体 ";color: #F00;} 


239 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


p.line::first-line {font-size: 200%;font-family: "黑体 ";color: #F00;} 
</style> 
</head> 
<body> 
<p class="letter"> 伪 元 素 用 于 将 特殊 的 效果 添加 到 某 些 选择 器 。 伪 元 素 只 应 用 特定 对 象 上 。</p> 
<p class="1ine"> 伪 元 素 用 于 将 特殊 的 效果 添加 到 某 些 选择 器 。 伪 元 素 只 应 用 特定 对 象 上 。</p> 
</body> 


@ ::before 和 ::after 伪 元 素 
::before 伪 元 素 可 用 于 在 某 个 元 素 内 容 之 前 插入 某 些 内 容 ，::after 伪 元 素 可 用 于 在 某 个 
元 素 内 容 之 后 插入 某 些 内 容 ， 注 意 必 须 和 content 属性 一 起 使 用 。 


11.3 CSS 内 容 


CSS 内 容 属性 与 ::before 及 ::after 伪 元 素 配合 使 用 来 插入 生成 内 容 ， 默 认 是 行内 内 容 。 
表 11.6 列 出 了 CSS 内 容 属 性 。 
表 11.6 CSS 内 容 属 性 
描 述 
用 来 和 ::after 及 ::before 伪 元 素 一 起 使 用 ， 在 元 素 前 或 后 显示 内 容 
设 定 计 数 器 及 增加 的 值 ， 计 数 器 可 任意 命名 
将 指定 计数 器 复位 
设置 元 素 内 使 用 的 嵌 套 标记 


属 性 
content 
counter-increment 
counter-reset 
quotes 


@ content 
content 属性 值 除 了 使 用 文本 以 外 ， 还 可 以 使 用 方法 等 其 他 值 。 表 11.7 列 出 了 content 


表 11.7 content 常用 属性 值 


默认 值 ， 与 none 值 相同 
不 生成 任何 值 
插入 标签 属性 值 


normal 


none 
<attr> 


<url> 插入 一 个 外 部 资源 图像 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 ) 
otring> 插入 字符 串 
counter(name) 使 用 已 命名 的 计数 器 


使 用 已 命名 的 计数 器 并 使 用 list-style-type 来 指定 编号 的 种 类 
插入 quotes 属性 的 后 标记 
插入 quotes 属性 的 前 标记 


counter(name,list-style-type) 
close-quote 


open-quote 


四 counter—increment 
counter-increment 设 定 计数 器 及 增加 的 值 ， 计 数 器 可 任意 命名 ， 增 加 的 值 默认 是 1， 可 
以 设 为 负 值 。 例 如 : 
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li{counter-increment:cil 2;} 


3】 quotes 
quotes 属性 为 content 属性 的 open-quote 和 close-quote 值 定义 标记 , 两 个 为 一 组 ,例如 : 


Tiiouotess nt my sy 
贺 11.6 CSS(content).html, 说 明了 content 属性 和 ::after 与 ::before 伪 元 素 的 使 用 ， 如 
几 11.6 所 示 。 


string 
CSS 内 容 属性 与 :befor 及 :after 伪 元 素 配合 使 
用 ， 来 插入 生成 内 容 。 这 是 插入 的 文本 内 容 


attr 
获取 段落 的 提示 信息 。 这 是 个 测试 
L 
ET 视频 讲解 


一 > 插入 外 部 资源 。 
counter (name) 
第 2. 列表 项 
第 4. 列表 项 
第 6. 列表 项 
counter (name, list-style-type) 
(i) 列表 项 
(ii) 列表 项 
(iii) 列表 项 
综合 应 用 
1. 列表 项 
1.1. 列表 项 
1.1.1. 列表 项 
1.1.2. 列表 项 
,2. 列表 项 
表 项 
. 列表 项 
. 列表 项 
表 项 
.1. 列表 项 
3. 2. 列表 项 


图 11.6 CSS(content).html 示意 图 


源 代码 如 下 : 


<head> 

<title>CSS 内 容 </title> 

<style> 
*{padding: Opx 2px; margin: 2px;} 
li{list-style-type: none;} 
.string p: :after{background:#FFF; content:" 这 是 插入 的 文本 内 容 "; color:#F00;} 
-attr p::after{content:attr (title) ;color:#F00;} 
.url p::before{content:url (images/w3c home.png);} 
-11 li{counter-increment:cil 2;} 
.11 1i::before{content:" 第 "counter (cil)".";color:#F00;padding-right:3px;} 


-12 li{counter-increment:ci2;} 
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-12 1i::before{content:open-quote counter(ci2,1lower-roman) close-— 
quote;color:#F00;padding-right:3px;} 

si2 T1000 wm) wey 

-13 li{counter-increment:ci3;} 

.13 1i::before{content:counter(ci3,decimal)".";color:#F00;padding— 
right:3px;} 

.13 1i li{counter-increment:ci4;} 

.13 1i 1i::before{content:counter (ci3,decimal)"."counter (ci4, decimal)".";} 
.13 1i 1i li{counter-increment:ci5;} 

.13 li li li::before{content:counter(ci3,decimal)"."counter (ci4, 
decimal)"."counter (ci5, decimal)".";} 


</style> 
</head> 
<body> 
<ul> 
<1li class="string"> 
<h3>string</h3> 
<p>CSS 内 容 属 性 与 : :before 及 : :after 伪 元 素 配 合 使 用 ， 来 插入 生成 内 容 。</p> 
</1i> 
<1i class="attr"> 
<h3>attr</h3> 
<p title=" 这 是 个 测试 "> 获取 段落 的 提示 信息 。</p> 
</1i> 


<1li class="url"> 
<h3>url ()</h3> 
<p> 插 入 外 部 资源 。</p> 
让 
<li class="11"> 
<h3>counter (name) </h3> 
<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
</ol> 
<t11i>s 
<1i class="12"> 
<h3>counter (name,1ist-style-type)</h3> 
<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
</o1> 
< 
<li class="13"> 
<h3> 综 合 应 用 </h3> 
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<ol> 
<1i> 列 表 项 
<ol> 
<1i> 列 表 项 
<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
</o01> 
</1i> 
<1i> 列 表 项 </1i> 
</ol> 
</1i> 
<1i> 列 表 项 
<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
</o1> 
lis 
<1i> 列 表 项 
<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
</o1> 
ee 
</o1> 
KAI 
</ul> 
</body> 


11.4 小结 


本 章 主要 介绍 了 CSS 伪 类 和 伪 元 素 及 其 用 法 。 


11.5 “习题 
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@ 选择 题 

(1) 下 面 说 法 正确 的 是 〈 )。 

. 伪 类 可 以 直接 定义 并 使 用 

B. 伪 类 选择 元 素 是 基于 当前 元 素 的 内 容 

C. 伪 元 素 可 以 对 元 素 中 的 所 有 内 容 进 行 操作 
D. 伪 元 素 只 应 用 于 特定 元 素 上 


> 
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(2) 下 面 选择 父 元 素 的 第 1 个 子 元 素 的 是 ); 
A. E:nth-last-child(1) B. E:nth-child(1) 
C. E:last-child D. E:only-child 
(3) 以 下 关于 ::after 伪 元 素 的 说 法 正确 的 是 让 
A. ::after 伪 元 素 在 元 素 之 后 添加 内 容 
B.::after 伪 元 素 只 能 应 用 于 超 链接 标签 
C. 使 用 ::after 伪 元 素 可 能 导致 浮动 元 素 塌陷 
D. : :after 不 可 以 在 元 素 之 后 添加 指定 链接 的 文件 内 容 
四 简 答题 
(1) 什么 是 伪 类 和 伪 元 素 ? 
(2) 伪 类 :hover 可 以 应 用 在 哪些 元 素 上 ? 
(3) 如 何在 同一 页 面 中 对 不 同 的 超 链 接 设置 不 同 的 样式 ? 


过 去 要 在 网 页 上 实现 一 些 动态 和 动画 效果 必须 借助 脚本 或 第 三 方 插件 才能 做 到 ， 现 在 
使 用 CSS3 增加 的 变换 、 过 渡 和 动画 样式 属性 可 以 轻松 实现 。 本 章 首先 介绍 CSS3 变换 、 
过 渡 和 动画 样式 属性 ， 然 后 完成 叮 叮 书店 首页 超 链接 、 伪 类 和 动画 的 样式 设计 。 


本 章 要 点 : 

好 CSS3 变换 。 
妇 CSS3 过 渡 。 
< 如 CSS3 动画 。 


12.1 变换 


通过 CSS3 transform 能 够 对 元 素 进行 旋转 、 缩 放 、 倾 斜 、 移 动 这 4 种 类 型 的 变换 处 理 。 


表 12.1 列 出 了 CSS3 变换 属性 。 
表 12.1 CSS3 变换 属性 


属 性 描述 
transform 对 元 素 应 用 2D 或 3D 变换 
transform-origin 改变 被 变换 元 素 的 原点 位 置 
transform-style 被 嵌 套 元 素 如 何在 3D 空间 中 显示 
3 定义 3D 元 素 距 视 图 的 距离 ， 以 像素 计 。 当 为 元 素 定义 perspective 
perspective 


子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 本 身 


属性 时 ， 其 


3D 元 素 的 底部 位 置 
元 素 在 不 面 对 屏 幕 时 是 否 可 见 


@ transform 坐标 系统 


perspective-origin 
backface-visibility 


HTML 元 素 是 平面 的 ,会 有 一 个 初始 坐标 系统 ， 如 图 12.1 所 示 。 其 中 ， 原 点 位 于 元 素 
的 左上 角 , Z 轴 指 向 浏览 者 , 初始 坐标 系统 的 Z 轴 并 不 是 三 维 空间 , 仅仅 是 z-index 的 参照， 
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决定 元 素 的 堆 蔷 顺序 ， 堆 释 靠 前 的 元 素 将 覆盖 后 面 的 。 

使 用 transform 所 参照 的 并 不 是 初始 坐标 系统 ， 而 是 一 个 新 的 坐标 系统 ， 如 图 12.2 所 
示 。 与 初始 坐标 系统 相 比 ，X、Y、Z 轴 的 指向 都 不 变 ， 但 原点 位 置 是 元 素 的 中 心 。 如 果 想 
要 改变 transform 坐标 系统 的 原点 位 置 ， 可 以 使 用 transform-origin， 默 认 值 是 50% 50% 0。 


X-axis 


Z-axis 
(towards the viewer) 


z= 
(towards tH| 


1 
y-axis 


Y-axis 


图 12.1 元 素 初始 坐标 系统 示意 图 图 12.2 transform 坐标 系统 示意 图 


如 果 没 有 使 用 transform-origin 改变 元 素 的 原点 位 置 ，CSS3 旋转、 缩放、 倾斜 和 移动 
的 变形 操作 都 是 以 元 素 的 中 心 位 置 进 行 的 。 若 使 用 transform-origin 改变 了 元 素 的 原点 位 置 ， 
CSS3 旋转 、 缩 放 和 倾斜 变形 操作 将 以 更 改 后 的 原点 位 置 进行 ， 但 位 移 变形 操作 始终 以 元 
素 的 中 心 位 置 进 行 。 

四 transform 

transform 设置 元 素 的 变换 ， 其 语法 如 下 : 


transform: none | <transform-function>+ 


transform-function 方法 支持 2D 和 3D 变换 。 
表 12.2 列 出 了 2D 变换 方法 。 
表 12.2 2D 变换 方法 
方 ” 法 描述 
matrix(n.n,n.n,n.n) 以 一 个 含 6 个 值 的 变换 矩阵 形式 指定 2D 变换 
2D 移动 ， 第 1 个 参数 对 应 和 轴 ， 第 2 个 参数 对 应 立轴 。 如 果 第 2 个 参数 未 


人 指定 ， 默 认 值 为 0 
translateX(n) 元 素 在 和 轴 《水 平方 向 ) 上 移动 
translateY (n) 元 素 在 立轴 “垂直 方向 ) 上 移动 
Totate(angle) 2D 旋转 ， 需 先 设置 transform-origin 属性 
2D 缩放 ， 第 1 个 参数 对 应 义 轴 ， 第 2 个 参数 对 应 立轴。 如 果 第 2 个 参数 未 
ee 指定 ， 默 认 取 第 1 个 参数 的 值 
scaleX(n) 元 素 在 X 轴 《水 平方 向 ) 上 缩放 
scaleY(n) 元 素 在 立轴 “垂直 方向 ) 上 缩放 


倾斜 , 第 1 个 参数 对 应 义 轴 , 第 2 个 参数 对 应 站 轴 。 如 果 第 2 个 参数 未 指定 ， 
skew(x-angle,y-angle) 默认 值 为 0 


skewX(angle) 元 素 在 义 轴 (水平 方向) 上 倾斜 
skewY (angle) 元 素 在 立轴 (垂直 方向 ) 上 倾斜 


加 1 CSS3(2Dtransform).html， 说 明了 2D 变换 方法 的 使 用 。 
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源 代 码 如 下 : 


<head> 
<title>cSS3 2D 变换 </title> 
<style> 
.test{width:100px;height:100px;border:1px solid #000;margin: Opx Opx 
50px 20px;-webkit-box-sizing:content-box;box-sizing:content-box;} 
.test div{width:100px;height :100px;background:#BBB;word-wrap: break-word; } 
.test .matrix{-webkit-transform:matrix(1,0,0,1,30,30);-ms-transfo 
rmmatrixz(lr OnOr lI0r S30 
transform:matrix(1,0,0,1,30,30);} 
.test .translate{-webkit-transform:translate(-10px,-10px) ;-ms-tra 
nsform:translate(-10px,—-10px); 
transform:translate (-10px, -10px);} 
.test .translatex{-webkit-transform:translatex (20px);-ms-transfor 
m:translateXx (20px); 
transform:translatex (20px);} 
.test .translateY{-webkit-transform:translateYy (10px);-ms-transfor 
m:translateY (10px); 
transform:translateYy (10px);} 
.test .rotatel{-webkit-transform:rotate(45deg);-ms-transform:rota 
te(45deg); 
transform:rotate (45deg); } 
.test .scale{-webkit-transform:scale(0.8,0.8);-ms-transform: 
scale (0.8,0.8); 
transform:scale(0.8,0.8);} 
.test .scalex{-webkit-transform:scalex(1.2);-ms-transform:scalex (1.2); 
transform:scaleXx (1.2);} 
.test .scaleY{-webkit-transform:scaleY (1.2);-ms-transform:scaleYy (1.2); 
transform:scaleY (1.2);} 
-test .skew{-webkit-transform:skew(l0deg,10deg);-ms-transform: 
skew (l0deg, 10deg); 
transform: skew (10deg, 10deg);} 
.test .skewx{-webkit-transform:skewX (10deg);-ms-transform:skewX (10deg); 
transform: skewX (10deg);} 
.test .skewY{-webkit-transform:skewY (10deg);-ms-transform:skewY (10deg); 
transform: skewY (10deg); 
} 
</style> 
</head> 
<body> 
<h3> 和 矩阵 变换 : matrix()</h3> 
<div class="test"> 
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<div class="matrix">transform:matrix(0,1,1,1,10,10)</div> 
</div> 
<h3> 移 动 : translate () ，translateX() ，translateY()</h3> 
<div class="test"> 

<div class="translate">transform:translate(-10px, -10px) </div> 
</div> 
<div class="test"> 

<div class="translatex">transform:translatexX (20px) </div> 
</div> 
<div class="test"> 

<div class="translateY">transform:translateY (10px) </div> 
</div> 
<h3> 旋 转 : rotate ()</h3> 
<div class="test"> 

<div class="rotatel">transform:rotate (45deg) </div> 
</div> 
<h3> 缩 放 : scale()</h3> 
<div class="test"> 

<div class="scale">transform:scale(0.8,0.8)</div> 
</div> 
<div class="test"> 

<div class="scaleXx">transform:scalex (1.2)</div> 
</div> 
<div class="test"> 

<div class="scaleY">transform:scaleY (1.2)</div> 
</div> 
<h3> 倾 斜 : skew () </h3> 
<div class="test"> 

<div class="skew">transform:skew(l0deg,10deg)</div> 
</div> 
<div class="test"> 

<div class="skewX">transform:skewX(10deg)</div> 
</div> 
<div class="test"> 

<div class="skewY">transform:skewY (10deg) </div> 
</div> 
</body> 


[ 圆 D2.2 ”Css3(2Dtransform-transition).html， 演 示 了 2D 变换 方法 的 
过 程 ， 如 图 12.3 所 示 。 

提示 : 变换 是 在 文档 流 外 发 生 的 ， 一 个 变换 的 元 素 不 会 影响 它 附 近 未 
变换 的 元 素 的 位 置 。 视频 讲解 
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和 矩阵 变换 : matrix() 


旋转 : rotate() 


NN 倾斜 : skew() 
移动 : translate()， 
translateX(), translateY() 缩放 : scale() 


| 
国 量 
| 


matrix(n,n,n,n,n,n) 变 换 和 矩阵 不 好 理解 ， 如 果 需 要 创建 变换 和 矩阵， 可 以 访问 网 站 
“http://www.useragentman.com/matrix/”， 精确 地 拖 放 元 素 ， 然 后 自动 生成 矩阵 变换 代码 。 
表 12.3 列 出 了 3D 变换 方法 。 


表 12.3 3D 变换 方法 


12.3 CSS3(2Dtransform-transition).html 示意 图 


方 法 描 述 
matrix3d(nnnnnnnnnnnnnnnn) | 以 一 个 4X4 生 阵 的 形式 指定 一 个 3D 变换 
i 3D 移动 ， 第 1 个 参数 对 应 X 轴 ， 第 2 个 参数 对 应 Y 轴 ， 第 3 
Ee 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 上 略 
translateX(x) 元 素 在 XX 轴 上 移动 
translateY(y) 元 素 在 立轴 上 移动 
translateZ(z) 元 素 在 Z 轴 上 移动 
3D 缩放 ， 第 1 个 参数 对 应 和 轴 ， 第 2 个 参数 对 应 Y 轴 ， 第 3 
dy 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 
scaleX(x) 元 素 在 义 轴 上 缩放 
scaleY(y) 元 素 在 立轴 上 缩放 
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方 法 描 述 

scaleZ(z) 元 素 在 Z 轴 上 缩放 

rotate3d(x,y,z,angle) 3D 旋转 ， 其 中 前 3 个 参数 分 别 表 示 旋 转 的 方向 ， 第 4 个 参数 
表示 旋转 的 角度 ， 参 数 不 允 许 省 略 

TotateX(angle) 元 素 以 和 轴 水 平 线 进行 旋转 。angle 值 为 正 ， 表 示 顺 时 针 方 向 ; 
angle 值 为 负 ， 表 示 道 时 针 方向 

rotateY (angle) 元 素 以 立轴 水 平 线 进行 旋转 。angle 值 为 正 ， 表 示 顺 时 针 方 向 ; 
angle 值 为 负 ， 表 示 道 时 针 方 向 

rotateZ(angle) 元 素 以 Z 轴 水 平 线 进行 旋转 。angle 值 为 正 ， 表 示 顺 时 针 方向 ; 
angle 值 为 负 , 表示 逆 时 针 方向 , 看 上 去 好 像 沿 中 心 点 进行 旋转 

perspective(n) 透视 距离 


贺 13 


CSS3(3Dtransform).html， 说 明了 3D 变换 方法 的 使 用 。 


源 代码 如 下 : 


<head> 


<title>CSS3 3D 变换 </title> 
<style> 
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/*"perspective:100px"; 为 浏览 者 距离 .test 平面 100px*/ 


.test{width:100px;height:100px;border:1lpx solid #000;margin: Opx Opx 

S50px 40px;-webkit-box-sizing:content-box;box-sizing:content-box; 
—webkit-perspective:100px;perspective:100px;} 

.test div{width:100px;height :100px;background:#BBB;word-wrap: break-word; } 

.test .translate3d{-webkit-transform:translate3d(10px,10px,10px); 
transform:translate3d (10px, 10px, 10px);} 

.test .translatex{-webkit-transform:translatex (10px);-ms-transfor 

m:translatex (10px); 
transform:translatex (10px);} 

.test .translateY{-webkit-transform:translateYy (10px) ; -ms-transfor 

m:translateY (10px); 
transform:translateY (10px);} 

.test .translateZz{-webkit-transform:translatez (10px); 
transform:translatez (10px);} 

div[class^="perspective"] {background-color: red;position: absolute; 

text-align: center;} 

.test .perspectivel{-webkit-transform:translatez (-20px); 
transform:translatez (-20px) ;opacity: 0.2;} 

.test .perspective2{-webkit-transform:translatez (-40px); 
transform:translatez (-40px) ;opacity: 0.4;} 

.test .perspective3{-webkit-transform:translatez (-60px); 
transform:translatez (-60px) ;opacity: 0.6;} 

.test .rotate3d{-webkit-transform:rotate3d(]1,1,1,45deg); 
transform:rotate3d(]1,1,1,45deg);} 

-test .rotatex{—-webkit-transform:rotatex(45deg); 
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transform:rotatex(45deg);} 
-test .rotateY{-webkit-transform:rotateY (45deg); 
transform:rotateY (45deg);} 
-test .rotateZz{-webkit-transform:rotatez (45deg);-ms-transform:rot 
ate(45deg); 
transform:rotatez (45deg);} 
.test .scale{-webkit-transform:scale3d(0.8,0.8,0.8); 
transform:scale3d(0.8,0.8,0.8);} 
.test .scalex{-webkit-transform:scalex(1.2);-ms-transform:scaleXx(1.2); 
transform:scalex (1.2);} 
.test .scaleY{-webkit-transform:scaleY (1.2);-ms-transform:scaleYy (1.2); 
transform:scaleY (1.2);} 
.test .scaleZ{-webkit-transform:scaleZz (1.2); 
transform: scalez (1.2);} 
</style> 
</head> 
<body> 
<h3> 移 动 : translate3d()</h3> 
<div class="test"> 
<div class="translate3d">translate3d (10px,10px, 5px)， 字 好 像 大 了 些 ， 因 为 往 
z 轴 方 向 移动 10px， 即 浏览 者 方向 。</div> 
</div> 
<div class="test"> 
<div class="translatex">translatex (10px)， 字 大 小 一 样 。</div> 
</div> 
<div class="test"> 
<div class="translateY">translatex (10px)， 字 大 小 一 样 。</div> 
</div> 
<div class="test"> 
<div class="translatez">translatez (10px)， 字 大 小 不 一 样 。</div> 
</div> 
<h3> 移 动 : 指定 透视 </h3> 
<div class="test"> 
<div class="perspectivel">translatez (-20px)， 字 大 小 变化 </div> 
perspective2">translatez (-40px) ， 字 大 小 变化 </div> 
<div class="perspective3">translatez (-60px) ， 字 大 小 变化 </div> 
</div> 
<h3> 旋 转 : rotate3d()</h3> 
<div class="test"> 
<div class="rotate3d">rotate3d(]1,1,1,45deg) </div> 
</div> 
<div class="test"> 
<div class="rotateXx">rotatex (45deg) </div> 
</div> 
<div class="test"> 


<div class= 
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<div class="rotateY">rotateY (45deg) </div> 
</div> 
<div class="test"> 

<div class="rotateZz">rotatez (45deg) </div> 
</div> 
<h3> 缩 放 : scale3d() </h3> 
<div class="test"> 

<div class="scale">scale3d(0.8,0.8,0.8)， 字 大 小 变化 </div> 
</div> 
<div class="test"> 

<div class="scaleX">scaleXx (1.2)， 字 大 小 变化 </div> 
</div> 
<div class="test"> 

<div class="scaleY">scaleY (1.2)， 字 大 小 变化 </div> 
</div> 
<div class="test"> 

<div class="scalez">scalez (1.2)， 字 大 小 变化 </div> 
</div> 
</body> 


贺 12.4。” CSS3G3Dtransform-transition).html， 演 示 了 3D 变换 方法 的 过 程 ， 如 图 12.4 


所 示 。 


移动 : translate3d() 移动 : 指定 透视 


旋转 : rotate3d() 


缩放 : scale3d() 


2 
三 
] 
三 


图 12.4 CSS3(3Dtransform) html 示意 图 
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@ transform-origin 

transform-origin 设置 元 素 以 某 个 原点 进行 转换 。 其 语法 如 下 : 

transform-origin: x-axis y-axis z-axis 

transform-origin 属性 值 可 以 使 用 关键 字 、 长 度 和 百分比 , 表 12.4 列 出 了 transform-origin 
属性 常用 值 。 


表 12.4 transform-origin 属性 常用 值 


值 描 述 
i 定义 视图 被 置 于 XX 轴 的 何 处 
人 left、center、right | length | % 
定义 视图 被 置 于 立轴 的 何 处 
ye top、center、bottom | length | % 
, 定义 视图 被 置 于 Z 轴 的 何 处 
Z-axis 


length 


2D 变换 的 transform-origin 属性 可 以 是 一 个 参 
数值 ， 也 可 以 是 两 个 参数 值 。 如 果 是 两 个 参数 值 ， 
第 1 个 值 设置 水 平方 向 (和 X 轴 ) 的 位 置 ， 第 2 个 值 
设置 垂直 方向 (Y 轴 ) 的 位 置 。 如 果 只 提供 一 个 ， 
该 值 将 用 于 横 坐 标 ， 纵 坐标 将 默认 为 50%。 其 默认 
值 为 50% 50%， 效 果 等 同 于 center center。 

3D 变换 的 transform-origin 属 
性 还 包括 了 Z 轴 的 第 3 个 值 一 一 
z-axis ， 用 来 设置 3D 变换 中 
transform-origin 远离 用 户 眼 睛 视点 

Ti 的 距离 ， 默 认 值 为 0， 其 取 值 可 以 
视频 讲解 。 。 为 <length>， 不 过 <96> 在 这 里 无 效 。 

圆 12.5 CSS3(transform-origin) html， 说 明了 
transform-origin 属性 的 使 用 ， 如 图 12.5 所 示 。 

源 代码 如 下 : 

<head> 

<title>transform 坐标 系统 </title> 图 12.5 CSS3(transform-origin).html 示意 图 
<style> 
.test{width:100px;height:100px; border:lpx solid #000;margin:0px Opx 
70px 100px; 
—webkit-box-sizing:content-box; 
box-sizing:content-box;} 
.test div{width:100px;height:100px; background:#DDD;word-wrap: break-word; } 
-test div[class^="rotatel"] {position:absolute;} 
.test div[class^="rotatell"] {-webkit-transform-origin:center center; 
-ms-transform-origin:center center; 


国 诗 2 


让 


transform-origin:center center;} 
-test div[class^="rotatel2"] {-webkit-transform-origin:top center; 
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-ms-transform-origin:top center; 
transform-origin:top center;} 
-test div[class^="rotatel3"] {-webkit-transform-origin:right center; 
-ms-transform-origin:right center; 
transform-origin:right center;} 
-test div[class^="rotatel4"] {-webkit-transform-origin:left top; 
-ms-transform-origin:left top; 
transform-origin:left top;} 
.test div[class^="rotatel5"] {-webkit-transform-origin:right bottom; 
-ms-transform-origin:right bottom; 
transform-origin:right bottom;} 
.rotatelll, .rotatel21, .rotatel31, .rotatel41, .rotatel51{-webkit-tr 
ansform: rotate (0deg) ;-ms-transform:rotate (0deg); 
transform:rotate (0deg) ;opacity: 0.5} 
.rotatell12, .rotatel22, .rotate132, .rotatel142, .rotatel52{-webkit-tr 
ansform: rotate(30deg) ;-ms-transform:rotate (30deg); 
transform:rotate (30deg) ;opacity: 0.6} 
.rotatell3, .rotatel23, .rotatel33, .rotatel43, .rotatel53{-webkit-tr 
ansform: rotate(60deg);-ms-transform:rotate (60deg); 
transform:rotate (60deg) ;opacity: 0.7} 
.rotatell4, .rotatel24, .rotatel34, .rotatel44, .rotatel54{-webkit-tr 
ansform: rotate(90deg) ;-ms-transform:rotate (90deg); 
transform:rotate (90deg) ;opacity: 0.8} 
</style> 
</head> 
<body> 
<h3> 旋 转 : rotate ()</h3> 
<div class="test"> 
<div class="rotatelll"></div> 
otatell2"></div> 
<div class="rotatell3"></div> 


<div class 


<div class="rotatell4"></div> 
</div> 
<div class="test"> 
<div class="rotatel21"></div> 
<div class="rotatel22"></div> 
<div class="rotatel23"></div> 
<div class="rotatel24"></div> 
</div> 
<div class="test"> 
<div class="rotatel31"></div> 
<div class="rotatel32"></div> 
<div class="rotatel33"></div> 
<div class="rotatel34"></div> 
</div> 
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<div class="test"> 
<div class="rotatel41"></div> 
<div class="rotatel42"></div> 
<div class="rotatel43"></div> 
<div class="rotatel44"></div> 

</div> 

<div class="test"> 
<div class="rotatel51"></div> 
<div class="rotatel52"></div> 
<div class="rotatel53"></div> 
<div class="rotatel54"></div> 

</div> 

</body> 


@ transform-style 

transform-style 指定 某 元 素 的 子 元 素 是 位 于 三 维 空间 内 , 还 是 在 该 元 素 所 在 的 平面 内 被 
扁平 化 。 其 语法 如 下 : 

transform-style: flat1preserve-3d 


transform-style 的 默认 值 是 flat， 当 值 为 preserve-3d 时 元 素 将 会 创建 局 部 堆 琶 上 下 
文 ,如 果 要 保证 变换 元 素 处 在 三 维 空间 内 ， 需 要 在 变换 元 素 的 父 元 素 上 定义 transform-style 
属性 。 

如 果 父 元 素 定义 了 transform-style: preserve-3d 属性 ， 则 所 有 子 元 素 都 处 于 同一 个 三 维 
空间 内 。 

贺 12.6 CSS3(transform-style).html， 说 明了 transform-style 属性 的 使 用 ， 如 图 12.6 
所 示 。 


图 12.6 CSS3(transform-style).html 示意 图 


源 代码 如 下 : 


<head> 
<title> 正 方 体 </title> 
<style> 
-Cube{fposition: absolute; margin: 60px 50px; 
—webkit-transform-style: preserve-3d; 


transform-style: preserve-3d; 
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—webkit-transform:rotatex(-30deg) rotateY (30deg); 
transform:TrotateX (-30deg) rotateY (30deg);} 


-Cube .surfacef{ 


}, 


position: absolute; 


width: 120px;height: 120px;border: 
background: rgba(255,255,255,0.7); 
-Webkit-box-shadow: inset 0 0 20px 
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);/* 内 阴影 模糊 值 为 20*/ 
line-height: 120px;text-align: center;color: #333;font-size: 100px; 


lpx solid #CCC; 


rgba(0,0,0,0.3); 


.Cube .surfacel {-webkit-transform: translatez (60px); 


.Cube .surface2 {-webkit-transform: rotateY (90deg) translatez (60px); 


.Cube .surface3 {-webkit-transform: rotateX(90deg) translatez (60px); 


.Cube .surface4 {-webkit-transform: rotateY (180deg) translatez (60px); 


-Cube .surface5 {-webkit-transform: rotateY(-90deg) translatez (60px); 


.Cube .surface6 {-webkit-transform: rotateX(-90deg) translatez (60px); 


</head> 
<body> 


transform: translatez (60px);} 


transform: rotateY (90deg) translatez (60px);} 


transform: rotateX(90deg) translatez (60px);} 


transform: rotateY(180deg) translatez (60px);} 


transform: rotateY(-90deg) translatez (60px);} 


transform: rotateX(-90deg) translatez (60px);} 
</style> 


<div class="cube"> 


<div 
<div 
<div 
<div 
<div 
<div 
</div> 
</body> 


如 果 像 “transform:rotateX(-30deg) rotateY(30deg);” 这 样 使 用 多 个 变换 函数 ， 
变换 函数 的 顺序 。 因 为 每 一 个 变换 函数 不 仅 改变 了 元 素 ， 而 且 改 变 了 和 元 素 关 联 的 
transform 坐标 。 当 变换 函数 依次 执行 时 ， 后 一 个 变换 函数 总 是 基于 前 一 个 变换 后 的 新 的 


class="surface 
class="surface 
class="surface 
class="surface 
class="surface 
class="surface 


transform 坐标 。 


12.2 “过渡 


CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 样式 时 的 效果 。 通 过 CSS3 过 渡 ， 可 
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surfacel">1</div> 
surface2">2</div> 
surface3">3</div> 
surface4">4</div> 
surface5">5</div> 
surface6">6</div> 


以 不 使 
了 CSS3 过 渡 属 性 。 
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JavaScript 脚本 ， 为 元 素 从 一 种 样式 变换 为 另 一 种 样式 时 添加 效果 。 表 12.5 列 出 


表 12.5 CSS3 过 渡 属性 


属 性 描 述 
transition 简写 属性 ， 在 一 个 属性 中 设置 4 个 过 渡 属性 
transition-property 规定 应 用 过 渡 的 CSS 局 性 名 称 


transition-duration 


transition-timing-function 


效果 时 间 曲 线 ， 默 认 是 "ease" 


transition-delay 
在 CSS3 中 ，transition 允许 CSS 的 属性 值 在 
在 鼠标 单 击 、 获 得 焦点 、 被 单 
的 属性 值 。transition 的 语法 如 下 : 


规定 过 渡 效 果 何 时 开始 ， 轩 


认 是 0 


- 定 的 时 间 内 平滑 的 过 渡 ， 这 种 效果 可 以 


击 或 对 元 素 的 任何 改变 中 触发 , 并 平滑 地 以 动画 效果 改变 CSS 


transition: [<'transition-property'>||<'transition-duration'>||<'transit 


ion-timing-function'>||<'transition-delay'>[, [<'transition-property'>|| 


<'transition-duration'>||<'transition-timing-function'>||<'transition-d 


elay'>]]* 


transition 主要 有 4 个 属性 值 ， 

@ transition-property 

执行 过 滤 的 属性 ， 
时 过 渡 效 果 将 开始 )， 有 以 下 3 个 值 。 

。 none: 没有 属性 会 获得 过 渡 效 果 。 

。 all: 所 有 属性 都 将 获得 过 渡 效果 。 


下 面 分 别 介绍 。 


属性 规定 应 用 过 渡 效果 的 CSS 属性 名 称 〈 当 指定 的 CSS 属性 改变 


。 ident: 指定 要 进行 过 渡 的 CSS 属性 列表 ， 列 表 以 逗号 分 隔 。 表 12.6 列 出 了 有 过 渡 
效果 的 属性 。 
表 12.6 ”有 过 渡 效 果 的 属性 
属性 名 称 类 型 
background-color color 
background-image only gradients 


background-position 


percentage 、length 


border-bottom-color color 
border-bottom-width length 
border-color color 
border-left-color color 
border-left-width length 
border-right-color color 
border-right-width length 
border-spacing length 
border-top-color color 
border-top-width length 
border-width length 
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属性 名 称 类 型 
bottom length、percentage 
color color 
crop rectangle 
font-size length、 percentage 
font-weight number 
height length、percentage 
left length、percentage 
letter-spacing length 
line-height number、length、percentage 
margin-bottom length 
margin-left length 
margin-right length 
margin-top length 
max-height length、percentage 
max-width length、percentage 
min-height length、percentage 
min-width length、percentage 
‘opacity number 
outline-color color 
outline-offset integer 
outline-width length 
padding-bottom length 
padding-left length 
padding-right length 
padding-top length 
right length、 percentage 
text-indent length、 percentage 
text-shadow shadow 
top length、 percentage 
vertical-align keywords、length、percentage 
visibility visibility 
width length、 percentage 
word-spacing length、percentage 
Z-index integer 


@ transition-duration 

变换 持续 的 时 间 ， 规 定 完成 过 渡 效 果 需 要 花费 的 时 间 〈 以 秒 或 毫秒 计 )， 默 认 值 0 表 
示 没 有 效果 。 

@ transition-timing-function 

在 持续 时 间 内 变换 的 速率 ， 它 有 以 下 6 个 值 。 

e ease: 默认 值 ， 逐 渐变 慢 。ease 函数 等 同 于 贝 塞 尔 曲 线 (0.25,0.1,0.25,1.0)。 

。 linear: 勾 速 。linear 函数 等 同 于 贝 塞 尔 曲 线 (0.0,0.0,1.0.1.0)。 
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e ease-in: 加 速 。ease-in 函数 等 同 于 贝 塞 尔 曲线 


(0.42.0.1.0.1.0)。 


。 ease-out: 减速 。ease-out 函数 等 同 于 贝 塞 尔 曲 


线 (0,0,0.58,1.0)。 


。 ease-in-out: 加 速 然 后 减速 。ease-in-out 函数 


等 同 于 贝 塞 尔 曲线 (0.42.0, 0.58,1.0)。 


。 cubic-bezier: 允许 自 定义 一 个 时 间 曲 线 , 特定 
的 cubic-bezier 曲线 。 (x1, yl1, x2, y2) 中 的 4 
个 值 特定 于 曲线 上 的 点 P1 和 点 P2。 另 外 ,所 


有 值 需要 在 [0.1] 区 域内 ， 否 则 无 效 。 


这 6 个 值 本 质 上 是 缓 动 函数 , 是 过 渡 在 数学 上 的 
描述 。 用 户 在 “https://easings.net/zh-cn” 网 站 上 可 以 


对 比 各 种 缓 动 函数 ， 查 看 它们 之 间 的 区 别 , 月 
停 在 每 条 线 上 可 以 观看 相应 的 演示 效果 。 


肯 鼠 标 悬 


除非 有 特殊 需求 , 使 用 1s 和 默认 过 渡 效 果 (ease) 


往往 是 最 好 的 。 
@ transition-delay 


transition-delay〔 变换 延迟 时 间 〉 用 来 指定 一 个 
动画 开始 执行 的 时 间 , 也 就 是 说 当 改 变 元 素 属性 值 后 
多 长 时 间 开 始 执行 transition 效果 ， 值 <time> 为 数值 ， 单 位 为 s( 秒 ) 或 者 ms (毫秒 )。 


如 果 要 实现 transition， 必 须 规定 两 项 内 容 : 


上 ， 二 是 效果 的 持续 时 间 。 
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[LTLLTLTA。 


图 12.7 CSS3(transition).html 示意 图 


-是 希望 把 效果 添加 到 哪个 CSS 样式 属性 


[项 12.7 Css3(transition).html， 说 明了 transition 属性 的 使 用 ， 如 图 12.7 所 示 。 


源 代码 如 下 : 
<head> 
<title>transform 过 渡 </title> 


<style> 
div[id^="transition"]{ 


width: 100px;height:100px; 
background-color: #8FB432; 


margin: 20px; 
} 
#transition-easef{ 


a 
国 * A 
视频 讲解 


transition:transform 1s ease,background-color 1s ease; 


} 
#transition-lineart{ 


transition:transform 1s linear,background-color 1s linear; 


和 
#transition-ease-in{ 


transition:transform 1s ease-in,background-color 1s ease-in; 


E 
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#transition-ease-out{ 


transition:transform 1s ease-out,background-color 1s ease-out; 


二 
#transition-ease-in-out{ 


transition:transform 1s ease-in-out,background-color 1s ease-in-out; 


} 
div[id^="transition"] :hovert{ 
transform:rotate (90deg); 
background-color: #ACB451; 
} 
</style> 
</head> 
<body> 
<div id="transition-ease"></div> 
<div id="transition-linear"></div> 
<div id="transition-ease-in"></div> 
<div id="transition-ease-out"></div> 
<div id="transition-ease-in-out"></div> 
</body> 


提示 : 不 能 从 display:none 状态 开始 过 渡 。 当 某 个 元 素 被 设 为 display:none 的 时 候 ， 事 


实 上 它 没 在 屏幕 上 ， 所 以 没有 状态 让 用 户 进行 过 渡 。 


12.3 ”动画 


CSS3 能 够 创建 动画 ， 可 以 在 网 页 中 取代 动画 图 片 、Flash 动画 以 及 JavaScript。 动画 是 


使 元 素 从 一 种 样式 逐渐 变化 为 另 一 种 样式 的 效果 。 表 12.7 列 出 了 CSS3 动画 属性 。 
表 12.7 CSS3 动画 属性 


属 性 描述 
@keyframes 创建 动画 
animation 所 有 动画 属性 的 简写 属性 ， 除 了 animation-play-state 属性 以 外 


规定 @keyframes 动画 的 名 称 
规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 。 默 认 值 是 0 
规定 动画 的 速度 曲线 。 默 认 值 是 "ease" 


animation-name 
animation-duration 


animation-timing-function 


规定 动画 何 时 开始 。 默 认 值 是 0 


animation-delay 


规定 动画 被 播放 的 次 数 。 默 认 值 是 1 


animation-iteration-count 


规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 值 是 "normal 


animation-direction 


animation-play-state 规定 动画 是 否 正在 运行 或 暂停 。 默 认 值 是 "running" 


规定 对 象 动画 时 间 之 外 的 状态 


animation-fill-mode 


@ CSS3 @keyframes 规则 
@keyframes 规则 用 于 创建 动画 。 在 @keyframes 中 规定 某 项 CSS 样式 就 能 创建 
样式 逐渐 改 为 新 样式 的 动画 效果 。 其 语法 如 下 : 


人 


EE 
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@keyframes animationname{keyframes-selector {css-styles;}} 
例如 ， 创 建 一 个 myfirst 动画 


@keyframes myfirst 


{ 


from {background:red;} 
to {background:yellow;} 


} 


表 12.8 列 出 了 @keyframes 属性 值 。 


值 


表 12.8 @keyframes 属性 值 


animationname 


必需 。 定 义 动画 的 名 称 


keyframes-selector 


css-styles 


必需 。 关 键 帧 
合法 的 值 : 0% 一 100%、from (与 0% 相同 ) 、to( 与 100% 相 同 ) 
必需 。 关 键 帧 时 一 个 或 多 个 合法 的 CSS 样式 属性 


关键 帧 用 百分比 来 规定 变化 发 生 的 时 间 ， 或 用 关键 字 from 和 to， 等 同 于 0% 和 100%。 
0% 是 动画 的 开始 ，100% 是 动画 的 完成 。 


@ animation 


在 @keyframes 中 创建 动画 后 ， 必 须 在 元 素 样式 中 通过 animation 属性 使 用 该 动画 ， 否 
则 不 会 产生 动画 效果 ，animation 属性 至 少 需 要 规定 动画 的 名 称 和 动画 的 时 间 。 
例如 把 "myfirst" 动 画 捆绑 到 div 元 素 ， 时 间 为 5s。 


div{animation: myfirst 5s;} 


用 户 可 以 通过 animation-timing-function 来 定义 动画 的 速度 曲线 ， 使 用 3 次 贝 塞 尔 
(Cubic Bezier) 数学 函数 生成 速度 曲线 ， 主 要 值 如 下 。 

。 linear: 动画 从 头 到 尾 的 速度 是 相同 的 。 

。 ease: 默认 。 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 

。 ease-in: 动画 以 低速 开始 。 

。 ease-out: 动画 以 低速 结束 。 

。 ease-in-out: 动画 以 低速 开始 和 结束 。 

。 cubic-bezier(n,n,n.n): 用 户 在 cubic-bezier 函数 中 自己 设 定 值 ， 可 能 的 值 是 0~1 的 


数值 。 


使 用 animation-delay 属性 可 以 定义 动画 何 时 开始 ， 值 以 秒 或 毫秒 计 。 
使 用 animation-iteration-count 属性 定义 动画 的 播放 次 数 ， 默 认 值 是 1， 关 键 字 infinite 


规定 动画 无 限 次 播放 。 


animation-direction 


normal, 表示 动画 应 该 正常 播放 。 如果 animation-direction 的 值 是 "alternate"， 


则 动画 会 在 奇数 次 (1、3 
向 播放 。 


[ 圆 12.8 CSS3(animation)html， 说 明了 animation 属性 的 使 用 ， 如 


图 12.8 所 示 。 


属性 定义 是 否 可 以 轮流 反 向 播放 动画 ， 默 认 值 是 


3、5 等 ) 正常 播放 ， 而 在 偶数 次 (2、4、6 等 ) 反 


视频 讲解 
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图 12.8 CSS3(animation) html 示意 图 
源 代 码 如 下 : 
<head> 
<title>animation 动画 </title> 
<style> 
div{width:60px;height:60px;padding:10px;margin-top: 100px; 
border-radius:40px;background: #E54D26; 
—webkit-box-shadow:0 0 10px rgba(204, 39, 52, 0.8); 
box-shadow:0 0 10px rgba(204, 39, 52, 0.8); 
-webkit-animation:move 4s linear infinite; 
animation:move 4s linear infinite; 
-webkit-animation-direction: alternate; 
animation-direction: alternate; 
} 
@keyframes movel{ 
0%S{-webkit-transform:translate (0,0); 
transform:translate (0,0);} 
25%{-webkit-transform:translate (100px, -50px); 
transform:translate (100px, -50px);} 
50%{-webkit-transform:translate (200px, Opx); 
transform:translate (200px, Opx);?} 
75%{-webkit-transform:translate (100px, 50px); 
transform:translate (100px, 50px);?} 
100%{-webkit-transform:translate (0,0); 
transform:translate (0,0);} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 


全 transition 和 animation 的 区 别 

transition 只 能 指定 属性 的 开始 值 与 结束 值 ， 通 过 在 两 属性 值 之 间 进 行 平滑 过 渡 的 方式 
来 实现 动画 效果 ， 所 以 transition 不 能 实现 复杂 的 动画 ; 而 animation 允许 用 户 创建 多 个 关 
键 帧 ， 通 过 对 每 个 关键 帧 设置 不 同 的 属性 值 可 以 实现 更 为 复杂 的 动画 效果 。 
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12.4 叮 叮 书店 首页 的 超 链接 、 伪 类 和 动画 样式 设计 


启动 WebStorm， 打 开外 部 样式 表 文 件 style.css (在 第 10 章 的 10.9 节 建 立 )， 定 义 叮 叮 
书店 首页 的 超 链 接 、 伪 类 和 动画 外 观 样式 。 

@ 购物 车 超 链接 

定义 #nav nav 为 包含 块 , #cart 为 绝对 定位 , 位 置 在 加 av nav 块 的 右边 , 如 图 12.9 所 示 。 


更 购物 车 视频 讲解 


图 12.9 购物 车 超 链接 


/* 购 物 车 菜单 的 定位 */ 

#nav nav{position: relative;} 

#cart {position: absolute; right :0px;top: l0px;background-color: 
#F3F3F3;line-height: 40px;min-width: 120px;display: none;justify-content: 
center;} 

/* 购 物 车 标题 图 标 */ 


.icon-cart:before {content: "\F07A";} 
/* 屏 幕 大 于 560px 宽度 时 显示 购物 车 */ 
emedia screen and (min-width: 560px) { 
#cart{display:flex;} 
} 
/* 购 物 车 超 链接 样式 */ 
# cart a, .icon-cart{color: hsl (20,50%,30%);text-decoration: none; font-size: 
1.2rem; font-weight: normal;} 
# cart a:hover{color:hsl(20,30%,50%);} 


@ 站 内 搜索 
定义 #search 绝对 定位 , 设置 位 置 坐标 , 定义 input[type="search"] 和 input[type="submit"] 
样式 ， 如 图 12.9 所 示 。 


/* 站 内 搜索 */ 

#search{position:absolute;top:114px;right:0px;} 

#search input [type="search"] {background: hsl(0,0%,95%);border: solid lpx 
hsl (0,0%,85%) ?min-width: 260px;font-size:1.1lrem;} 

#search input[type="submit"] {background-color: hs1l{(0,0%,85%) ?color: 
hsl (20,50%,30%) ;border: solid lpx hsl (0,0%, 85%) ;font-size:1.1rem; padding: 
0 10px;} 
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@ 本 周 推荐 图 书 封面 图 像 
定义 .recommend img 的 不 透明 度 为 0.6， 当 鼠标 悬 停 在 其 上 时 经 过 2s 不 透明 度 变 为 1 。 
/* 本 周 推荐 图 像样 式 */ 


#recommend img{opacity: 0.6;} 


#recommend img:hover{opacity: 1; transition: 2s;} 


@ 本 周 推荐 、 最 近 新 书 、 最 近 促 销 加 入 购物 车 、 详 细 内 容 超 链 接 
本 周 推荐 、 最 近 新 书 、 最 近 促销 加 入 购物 车 、 详 细 内 容 超 链接 使 用 了 opacity 样式 属性 ， 
当 鼠 标 悬 停 在 超 链 接 上 时 背景 颜色 有 个 透明 度 的 变化 ， 如 图 12.10 所 示 。 


加 入 购物 车 


图 12.10 透明 度 发 生变 化 


/* 本 周 推荐 、 最 近 新 书 、 最 近 促销 加 入 购物 车 、 详 细 内 容 超 链 接 样 式 */ 

.cart{text-decoration:none;background: hsl(20,30%,50%); color: hsl(0,0%, 

100%) ;min-width:120px;opacity: 0.7;display: flex;justify-content: center; 

height: 30px; align-items: center;padding-bottom: 2px;margin-right: 2px;} 

.Cart:hover {text-decoration:none;opacity: 1;} 

.more{text-decoration:none;background: hsl (20, 30%, 50%); color: hsl (0, 0%, 

100%) ;min-width:120px;opacity: 0.7;display: flex;justify-content: center; 

height: 30px; align-items: center;padding-bottom: 2px;} 

.more:hover {text-decoration:none;opacity: 1;} 

@ 图 书 分 类 和 合作 伙伴 超 链接 

定义 #classify 样式 ， 超 链接 文本 没有 下 画 线 ， 文 字 颜 色 为 hsl(0.0%,0%)， 当 鼠标 悬 停 
在 超 链 接 上 时 文字 颜色 变 为 hsl(20,30%,50%)。 

/* 图 书 分 类 和 合作 伙伴 超 链接 样式 */ 

#classify 1i a,#partner li a{text-decoration:none;color: hsl(0,0%,0%);} 


#classify a:hover, #partner a:hover {text-decoration:none;color:hs]l (20, 30%, 50%);} 


#classify ul,#partner ul{margin: 0.5rem lrem;} 


@ 页 脚 超 链接 
定义 footer a 和 #copyright a 样式 ， 如 图 12.11 所 示 。 


服务 隐私 策略 


图 12.11 页 脚 超 链接 
/* 页 脚 超 链接 样式 */ 


footer ul{display: flex; flex-flow: row wrap;justify-content:center;} 
footer ul li{min-width: 130px;} 
footer a {color: hsl(0,0%,100%);text-decoration:none;font-size: 1.2rem; 
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display: flex;height:60px;justify-content:center;align-items:center;} 
footer a:hover{background-color: hsl(20,50%,30%);} 

#copyright a {text-decoration:none;color:hsl (0,0%,0%);font-size: 1.1rem; 
margin: 0 0.5rem;} 

#copyright a:hover {text-decoration:none;color:hsl (20,30%,50%);} 


@ 最 近 新 书 

定义 .text-desc 文字 块 绝对 定位 ， 位 置 在 左上 角 ， 将 z-index 设 为 -1 表示 文字 层 在 图 像 
的 下 面 ， 不 透明 度 为 0。 

设 .effect-1 为 包含 块 ， 透 视 距 离 为 800px， 当 鼠标 悬 停 在 .effect-1 上 时 .image-box 元 素 
在 义 轴 上 旋转 75deg， 旋 转 中 心 点 为 底部 中 间 位 置 ， 过 渡 时 间 为 1s， 同 时 .text-desc 块 的 不 
透明 度 为 1， 过 渡 时 间 为 2s， 如 图 12.12 所 示 。 


《HTML5+CSS3 从 入 门 到 精通 》 《响应 式 Web 设 计 》 


《响应 式 Web 设 计 》 


《响应 式 Web 设 计 和 CSS3 实 
战 》 将 当前 Web 设 计 中 热门 的 响应 式 设计 技 
术 与 和 CSS3 结 合 起 来 ， 为 读者 全 面 
深入 地 讲解 了 针对 各 种 屏幕 大 小 设计 和 开发 
现代 网 站 的 各 种 技术 。《 响 应 式 Web 设 计 : 
和 (CSS3 实 战 》 适 合 各 个 层次 的 Web 


开发 和 设计 人 员 阅 读 。 
E 
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图 12.12 旋转 效果 (X 轴 ) 
/* 最 近 新 书 变 换 样式 */ 


#new .effect-l{position: relative; overflow: hidden;border: lpx solid hsl (0, 
0%,80%); perspective: 800px;} 

#new .effect-1:hover .image-box{transform: rotatex(75deg) ;transition: 1s; 
transform-origin: center bottom;} 

#new .text-desc{position: absolute;left: 0px; top:0px;margin-bottom:25px; 
padding: 1l0px;opacity: 0; z-index:-1;} 

#new .effect-l:hover .text-desc{opacity: 1l;transition: 2s;} 


@ 最 近 促销 

定义 .text-desc 文字 块 绝对 定位 ， 位 置 在 左上 角 ， 将 z-index 设 为 -1 表示 文字 层 在 图 像 
的 下 面 ， 不 透明 度 为 0。 

设 .effect-1 为 包含 块 ， 透 视 距 离 为 800px， 当 鼠标 悬 停 在 .effect-1 上 时 .image-box 元 素 
在 Y 轴 上 旋转 180deg， 过 渡 时 间 为 1s, 不 透明 度 为 0.2， 同 时 .text-desc 块 的 不 透明 度 为 1， 
过 渡 时 间 为 2s， 如 图 12.13 所 示 。 
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《HTML5 和 CSS3 实 例 教程 《Javascript 权 威 指南 》 


图 12.13 ”旋转 效果 (Y 轴 ) 
/* 最 近 促销 变换 样式 */ 


#sales .text-desc{position: absolute;left: Opx; top:0px;margin-bottom: 


25px;padding: 1l0px;opacity: 0; z-index:-1;} 
#sales .effect-l{position: relative; overflow: hidden;border: 
hsl(0,0%,80%); perspective: 800px;} 


#sales .effect-1:hover .image-box{transform: rotateY(180deg) ;transition: 


ls;opacity: 0.2;} 
#sales .effect-1:hover .text-desc{opacity: 1l;transition: 2s;} 


@@ 易 销 图 书 


首先 对 #best-selling 1 列表 项 添加 序号 并 设 定 样式 ， 然 后 对 畅销 图 书 列 表 项 图 像 
#best-selling .curr .p-img 和 文字 #best-selling .curr .p-name 进行 样式 设置 , 最 后 设 定 当 鼠 标 悬 


停 在 #best-selling li 上 时 的 样式 效果 ， 如 图 12.14 所 示 。 


名 畅销 图 书 


Hadoop 权 威 指南 : 大 数据 的 存储 与 分 析 ( 第 … 
和 秋 叶 一 起 学 PPT 第 3 版 

图 深度 学 习 优 化 与 识别 

区 块 链 原理 、 设 计 与 应 用 


图 12.14 畅销 图 书 变换 样式 
/* 畅 销 图 书 变 换 样式 */ 


#best-selling ul{margin-top: lrem;} 


#best-selling li:before{content: counter(listxh);background:hsl (20,30%, 
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50%) ?padding: 2px 5px;color: hsl(0,0%,100%);margin-right: 5px7Vertical- 
align: top;float: left;} 
/* 当 行距 长 时 ,overflow: hidden 为 隐藏 ,white-space: nowrap 为 不 换行 , text-overflow: 
ellipsis 为 多 的 部 分 显示 省 略 号 */ 
#best-selling 1i{ 
counter-increment: listxh;overflow: hidden;white-space: nowrap; 
text-overflow: ellipsis;margin-top: 8px; 
transition:text-shadow 1s linear; 
border-bottom:hsl1 (0,0%,80%) dashed lpx; 
max-width: 420px; 
} 
-p-img img{width:80px;height:80px;} 
#best-selling .curr .p-img{float: left;} 
#best-selling .curr .p-name strong{display: block; color:hsl (0,100%,50%); 
font-size: lrem;} 
#best-selling .curr .p-name del{display: block;font-size: lrem;} 
#best-selling .curr{display: none;} 
#best-selling a{color: hsl (0,0%,0%);text-decoration: none; font-size: lrem;} 
#best-selling 1i:hover{text-shadow: 1px 4px 4px hsl1 (0, 0%, 0%) ;white-space: normal;} 
#best-selling li:hover .selling{display:none;} 
#best-selling li:hover .curr{display:block;} 


12.5 小结 
本 章 首 先 介绍 了 CSS3 变换 、 过 渡 和 动画 样式 属性 ， 然 后 详细 介绍 了 叮 叮 书店 首页 超 
链接 、 伪 类 和 动画 的 样式 设计 过 程 。 


12.6 习题 


@ 选择 题 
(1) transform 默认 坐标 系统 的 原点 位 置 是 〈 5 


A. 0%0% B. 0% 50% 

C. 50% 50% D. 50% 0% 
(2) transform 不 能 够 对 元 素 进行 变换 的 是 让 

A. 旋转 B. 缩放 C. 移动 D. 背景 
(3)( ”) CSS 属性 不 能 过 渡 。 

A. background-color B. border-color 

CP D. text-shadow 


(4) 要 实现 transition 效果 ， 下 面 说 法 中 错误 的 是 ( 加 
A. 必须 确定 效果 添加 到 哪个 CSS 样式 属性 上 
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B. 必须 声明 效果 的 持续 时 间 

C. 必须 定义 什么 时 候 触 发 

D. 不 能 同时 对 多 个 CSS 样式 属性 进行 效果 过 渡 
(5) 关于 animation， 下 面 说 法 中 错误 的 是 先 

A. 用 @keyframes 创建 动画 

B. 必须 在 元 素 样 式 中 通过 animation 属性 使 用 @keyframes 创建 动画 ,否则 不 会 产 

生动 画 效 果 

C. 关键 帧 的 合法 值 是 0 一 100 

D. animation 属性 至 少 需 要 规定 动画 的 名 称 和 动画 的 时 间 
四 简 答题 
(1) 在 进行 变换 时 如 何 改 变 transform 元 素 的 原点 位 置 ? 
(2) transform-function 方法 支持 的 2D 和 3D 变换 有 什么 区 别 ? 
(3) 什么 是 过 渡 ? 如 果 要 实现 transition， 必 须 规 定 什么 ? 
(4) 如 果 一 个 元 素 的 显示 类 型 为 “display:none;”， 能 否 实现 过 渡 ? 
(5) CSS3 实现 animation 的 主要 步骤 是 什么 ? 
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在 页 面 布局 完成 后 ， 制 作 网 页 的 主要 任务 是 设计 导航 和 显示 的 内 容 ， 利 用 CSS 可 以 方 
便 地 实现 导航 菜单 ， 也 可 以 把 文字 和 图 像 组 织 起 来 用 于 显示 内 容 。 本 章 首先 介绍 HTML 默 
认 样 式 ， 接 下 来 讨论 如 何 建 立 导航 菜单 ， 最 后 介绍 图 文 混 排 的 一 般 方法 。 

本 章 要 点 : 

人 如 HIML 默认 样式 。 

他 导航 菜单 。 

他 图 文 混 排 。 


13.1 默认 样式 


HTML 标签 即使 没有 定义 样式 ， 在 浏览 器 中 显示 时 也 会 具有 各 种 样式 属性 ， 这 是 因为 
它们 有 自己 的 默认 样式 ， 或 者 是 浏览 器 给 它们 定义 了 默认 样式 。 不 同 的 浏览 器 定义 的 默认 
样式 有 所 差别 。 


13.1.1 HTML 默认 样式 


html,address, blockquote, body, dd, div,d]l, dt, fieldset, form,h],h2,h3,h4,h5, 
h6,01,p,ul,center, dir,hr,menu,pre{display:block}/* 均 以 块 状元 素 显示 ， 未 列 出 的 
以 行内 元 素 显 示 */ 


li{display:1ist-item} /* 上 默认 以 列表 显示 */ 
head{display:none} /* 默 认 不 显示 */ 
table{display:table} /* 默 认 以 表格 显示 */ 
tr{display:table-row} /* 默 认 以 表格 行 显示 */ 
thead{display:table-header-group} /* 默 认 以 表格 头 部 分 组 显示 */ 
tbody{display:table-row-group} /* 默 认 以 表格 行 分 组 显示 */ 
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tfoot{display:table-footer-group} /* 默 认 以 表格 底部 分 组 显示 */ 
col{display:table-column} /* 默 认 以 表格 列 显示 */ 
colgroup{display:table-column-group} ”/* 默 认 以 表格 列 分 组 显示 */ 

tq, th{display:table-cell;} /* 默 认 以 单元 格 显示 */ 
caption{display:table-caption} /* 默 认 以 表格 标题 显示 */ 
th{font-weight:bolder;text-align:center} /* 上 默认 以 表格 标题 显示 ， 呈 现 加 粗 、 居 中 状态 */ 
caption{text-align:center} /* 默 认 以 表格 标题 显示 ， 呈 现 居中 状态 */ 


body {margin:8px;line-height:1.12} 

hl{font-size:2em;margin:0.67em 0} 
h2{font-size:1.5em;margin:0.75em 0} 
h3{font-size:1.17emzmargin:0.83em 0} 

h4,p,blockquote, ul, fieldset, form, ol,dl,dir,menu{margin:1.12em 0} 
h5{font-size:0.83em;margin:1.5em 0} 
h6{font-size:0.75emzmargin:1.67em 0} 

hl,h2,h3,h4,h5,h6,b, strong{font-weight:bolder} 
blockquote{margin-left:40px;margin-right:40px} 
i,cite,em,var,address{font-style:italic} 

pre,tt, code, kbd, samp{font-family:monospace} 

pre{white-space:pre} 

button, textarea, input, object, select{display:inline-block;} 
big{font-size:1.17em} 

small, sub, sup{font-size:0.83em} 

sub{vertical-align:sub} /* 定 义 sub 元 素 默 认 以 下 标 显示 */ 
sup{vertical-align:super} /* 定 义 sub 元 素 默 认 以 上 标 显示 */ 
table{border-spacing:2px;} 

thead, tbody,tfoot{vertical-align:middle}/* 定 义 表 头 、 主 体 表 、 表 脚 元 素 默认 为 重 直 对 齐 */ 
td,thfvertical-align:inherit}yV* 定 义 单 元 格 、 列 标题 默认 为 垂直 对 齐 ， 继 承 */ 
s,strike, del{text-decoration:1ine-through}/* 定 义 s、strike 和 del 元 素 默 认 以 删 
除 线 显示 */ 

hr{border:1pxinset}/* 定 义 分 隔 线 默认 为 1px 宽 的 3D 止 边 效果 */ 
ol,ul,dir,menu,dd{margin-left:40px} 

ol{list-style-type:decimal} 
olul,ulol,ulul,olol{margin-top:0;margin-bottom:0} 
u,ins{text-decoration:underline} 

br:before{content:"A"}/* 定 义 换行 元 素 的 伪 元 素 内 容 样式 */ 

:before, :after{white-space:pre-line}/* 定 义 伪 元 素 空格 字符 的 默认 样式 */ 
center{text-align:center} 
abbr,acronym{font-variant:small-caps;letter-spacing:0.1em} 

:link, :visited{text-decoration:underline} 


:focus{outline:thin dotted invert} 

BDO[DIR="ltr"] {direction:1ltr;unicode-biqdi:biqdi-override}/* 定 义 BDO 元 素 当 其 
属性 为 DIR="1tr" 时 的 默认 文本 读 写 显 示 顺序 */ 

BDO[DIR="rtl"] {direction:rtl;unicode-bidi:bidi-override}/* 定 义 BDO 元 素 当 其 
属性 为 DIR="rt1" 时 的 默认 文本 读 写 显示 顺序 */ 

*[DIR="1ltr"] {direction:ltr;unicode-bidi:embed}/* 定 义 任何 元 素 当 其 属性 为 
DIR="1tr" 时 的 默认 文本 读 写 显 示 顺序 */ 
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*[DIR="rtl"] {direction:rtl;unicode-bidi:embed}/* 定 义 任 何 元素 当 其 属性 为 

DIR="rt1" 时 的 默认 文本 读 写 显示 顺序 */ 

@mediaprint{/* 定 义 标题 和 列表 默认 的 打印 样式 */ 
hl{page-break-before:always} 
hl,h2,h3,h4,h5,h6{page-break-after:avoid} 
ul,ol,dl{page-break-before:avoid} 

} 


13.1.2 ”浏览 器 默认 样式 


@ 页 边 距 

下 默认 为 10px， 通 过 body 的 margin 属性 设置 FF 默认 为 8px， 通 过 body 的 padding 
属性 设置 。 如 果 要 清除 页 边 距 ， 一 定 要 清除 这 两 个 属性 值 ， 例 如 : 

body{margin:0;padding:0;} 

@ 段 问 距 

下 默认 为 19px， 通 过 p 的 margin-top 属性 设置 ， FF 默认 为 1.12em， 通 过 p 的 
margin-bottom 属性 设置 。 如 果 要 清除 段 间 距 ， 一 般 可 以 设置 : 

p{margin-top:0;margin-bottom:0;} 

加 标题 样式 

hl 一 h6 默认 加 粗 显示 ， 字 体 大 小 为 : 

hl{font-size:xx-large; }; 

h2{font-size:x-large;}:; 

h3{font-size:large;}; 

h4{font-size:medium;}; 

h5{font-size:small;}:; 

h6{font-size:x-small;}。 

浏览 器 默认 字体 大 小 为 16px， 即 等 于 medium。 如 果 要 清除 标题 样式 ,一 般 可 以 设置 : 


hx{font-weight:normal;font-size:value;} 


@ 列表 样式 

下 默认 为 40px, 通过 ul、 ol 的 margin 属性 设置 ; FF 默认 为 40px, 通过 ul、ol 的 padding 
属性 设置 ，dl 无 缩 进 ， 但 说 明 元 素 dd 默认 缩 进 40px， 而 dt 没有 缩 进 。 如 果 要 清除 列表 样 
式 ， 一 般 可 以 设置 

ul,ol,dd{list-style-type:none;margin-left:0;padding-left:0;} 

@ 元 素 居 中 

正 默认 为 “textralign:center”; FF 默认 为 “margin-left:auto;margin-right:auto ”。 

@ 起 链接 样式 

a 样式 默认 带 有 下 画 线 ， 显 示 颜 色 为 蓝 色 ， 被 访问 过 的 超 链接 变 紫 色 。 如 果 要 清除 超 
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链接 样式 ， 一 般 可 以 设置 : 


a{text-decoration:none;color:#colorname;} 


@ 鼠标 样式 
IE 默认 为 “cursor:hand”，FF 默认 为 “cursorpointer”。 
@ 图 片 链接 样式 


正 默认 为 紫色 、2px 的 边框 线 ，FF 默认 为 蓝 色 、2px 的 边框 线 。 如 果 要 清除 图 片 链接 
样式 ， 一 般 可 以 设置 : 


img{border:0;} 


13.2 页面 内 容 样式 设计 


13.2.1 导航 菜单 


通常 用 (无 序列 表 ) 来 构建 导航 菜单 ， 每 个 i (列表 项 ) 是 一 个 菜 多 
单项 ， 当 然 也 可 以 使 用 ol、dl 实现 。 导 航 菜单 形式 多 样 ， 基 本 上 可 以 概括 视频 讲解 
为 3 类 ， 即 水 平 菜单 、 垂 直 菜 单 和 多 级 菜单 

下 面 以 叮 叮 书店 首页 为 例 说 明 导 航 菜单 的 建立 过 程 。 启动 WebStorm, 打开 叮 叮 书店 项 
目 首页 index.html 和 外 部 样式 表 文件 style.css (在 第 12 章 的 12.4 节 建 立 )， 定 义 叮 叮 书店 
首页 导航 菜单 的 设计 。 

@ 水 平 菜单 

1) 内 容 结构 

在 index.html 文件 <nav class="container"> 包 含 元 素 里 ， 用 <ul> 构 建 菜 单 内 容 结构 。 


<ul> 

<li><a href="index.html"> 首 页 </a></1i> 
<li><a href="category .html"> 书 籍 分 类 </a></1i> 
<li><a href="specials.html"> 特 刊 降价 </a></1i> 
<1i><a href="contact .html"> 联 系 我 们 </a></1i> 
<1i><a href="about .html"> 关 于 我 们 </a></1i> 
</ul> 


2) 样式 设计 

切换 到 style.css 编辑 区 ， 定 义 样式 。 

定义 nav ul 列表 项 水 平 显示 , nav ul a 内 容 通 过 伸缩 傅 水 平和 垂直 居中 对 齐 , 当 鼠 标 巷 
停 在 nav ul a 超 链接 上 时 改变 背景 颜色 。 

/* 水 平 导 航 菜 单 */ 


nav ul {display: flex; flex-flow: row wrap;justify-content:center;} 


/* 目 前 移动 设备 的 最 小 屏幕 宽度 为 320px， 将 菜单 项 最 小 宽度 设 为 160px， 能 够 保证 在 移动 设备 
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上 一 行 最 少 显示 两 个 菜单 项 */ 

nav ul li{min-width: 160px;} 

nav ul a{height: 60px;display: flex;align-items: center;justify-content: center; 
COLOrs hsl1(0,0%,100%) ;text-decoration: none; font-size:1.3rem;font— 
weight: normal; 
transition:background 0.5s linear; 

} 

nav ul a:hover{background-color: hsl(20,50%,30%);} 

/*Apple iPhone 6 plus 的 宽度 为 414px， 大 于 这 个 宽度 时 菜单 项 将 从 左 开始 对 齐 */ 

@media screen and (min-width: 414px) { 
nav ul{justify-content:flex-start;} 

} 


切换 到 index.html 编辑 区 ， 将 光标 定位 到 “<link hre 伟 "style.css" rel="stylesheet">” 后 
按 回 车 键 ， 输 入 内 部 样式 。 
<style> 

nav ul li:first-child{background-color: hsl(20,50%,30%);} 


footer ul li:first-child{background-color: hsl(20,50%,30%);} 
</style> 


水 平 菜单 效果 如 图 13.1 所 示 。 


竺 刊 降价 联系 我 们 


图 13.1 水 平 菜 单 示 意图 


@ 重 直 菜单 
垂直 菜单 的 内 容 结构 与 水 平 菜单 一 样 ， 不 同 的 是 在 样式 设计 上 不 需要 将 无 序列 表 项 水 
现 ， 不 在 一 行 上 显示 。 

nav ul {display: flex; justify-content:center; flex-flow: column; width: 160px;} 
@ 多 级 菜单 

1) 内 容 结构 

切换 到 index.html 编辑 区 ,在 书籍 分 类 菜单 项 里 增加 下 拉 


单 ， 将 光标 定位 到 “<li><a 


hre 人 "category.html"> 书 籍 分 类 </a> ”后面 ， 按 回 车 键 ， 输 入 下 面 的 代码 ; 


也 就 


<ul> 
<1i><a href="#"> 编 程 语言 </a></1i> 
<1i><a href="#"> 数 据 库 </a></1i> 
<1i><a href="#"> 图 形 图 像 </a></1i> 
</ul> 


是 在 元 素 里 超 链接 元 素 的 下 面 嵌 入 了 一 个 菜单 作为 下 拉 菜 单 。 多 级 菜单 的 内 容 结 构 


如 下 : 


<ul> 
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<li><a href="index.html"> 首 页 </a></1i> 
<1li><a href="category .html"> 书 籍 分 类 </a> 
<ul> 
<1i><a href="#"> 编 程 语言 </a></1i> 
<1i><a href="#"> 数 据 库 </a></1i> 
<1i><a href="#"> 图 形 图 像 </a></1i> 
</ul> 
</1i> 
<li><a href="specials.html"> 特 刊 降价 </a></1i> 
<li><a href="contact .html"> 联 系 我 们 </a></1i> 
<1i><a href="about.html"> 关 于 我 们 </a></1i> 
</ul> 


2) 样式 设计 

切换 到 style.css 编辑 区 ， 在 水 平 菜单 样式 的 基础 上 定义 下 拉 菜 单 样式 加 av nav ul ul， 
由 于 下 拉 菜 单 开始 时 是 不 可 见 的 ， 所 以 将 visibility 属性 设 为 隐藏 ， 下 拉 菜 单 通过 绝对 定位 
方式 显示 在 菜单 项 的 下 面 ， 定义 加 av nav ul li:hover ul 样式 ， 当 鼠标 悬 停 在 菜单 项 〈 即 荆 
元 素 ) 上 时 ， 元 素 里 的 由 (下 拉 菜 单 ) 的 visibility 属性 应 为 可 见 的 。 同 样 ， 当 下 拉 菜 单 
显示 时 应 在 最 前 面 ， 将 z-index 值 设 为 100。 菜 单 显示 效果 如 图 13.2 所 示 。 


关于 我 们 


的 下 一 FwebsRt ， TIE 为 5 = 
EECEEEITETD 

- 快 通 入 行 前 端 
成 就 开发 高 手 /FE 


图 13.2 多 级 菜单 示意 图 


/* 多 级 菜单 */ 

#nav nav ul li{position: relative;} 

#nav nav ul ul li{background-image:url ("images/navbg.jpg");} 

/*#nav nav ul ul 1i a{border-left: solid lpx hsl (20,50%,30%) ;border-right: 
solid lpx hsl(20,50%,30%);border-bottom: solid lpx hsl(20,50%,30%)}*/ 
#nav nav ul ul {visibility: hidden;position: absolute;left:-1lpx;background- 
image:url ("images/navbg.jpg");} 

#nav nav ul li:hover ul{visibility: visible; z-index: 100;} 


@ 导航 菜单 资源 
CSS Tab Designer 是 一 款 专 供用 户 使 用 CSS 设计 导航 菜单 的 可 视 化 工具 ， 而 且 是 免费 
的 ， 可 以 从 “http://css-tab-designer.en.softonic.com/ ”下载 。 


13.2.2 图 文 混 排 


图 文 混 排 是 制作 精美 页 面 必 须 使 用 的 技术 ， 通 过 将 适当 的 图 像 与 文字 有 效 地 排列 在 一 
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起 可 以 大 大 丰富 版 面 内 容 。 图 文 混 排 的 结构 没有 统一 的 标准 ， 一 般 做 法 是 把 图 像 和 文本 信 
息 同 时 封装 在 一 个 包含 元 素 内 ， 再 嵌入 其 他 布局 元 素 或 修饰 元 素 。 
贺 13.1 Css(article)html， 实 现 了 一 个 图 文 混 排 单元 模块 ， 如 图 13.3 所 示 。 


萨 拉 一 一 年 度 最 热 的 女人 


最 雪人 


图 13.3 CSS(article).html 示意 图 


源 代码 如 下 : 


<head> 
<title> 图 文 混 排 </title> 
<style> 
#content {font-family: 微软 雅 黑 , sans-serif;} 
.article {display:inline-block;background-color:#000;color:#FFF; 
width:200px;padding:5px;position:relative;opacity:0.9;} 
#content h2 {height:20px;width:60px;background-color:#F00;font— 
weight:bolder;text-align:center;font-size:14px;position:absolute; 
top:20px;right:0px;z-index: 1;} 
.article h3 {font-size:1l2px; text-align: center;} 
.article p {font-size:1l2px; text-indent: 2em;} 
@keyframes move { 
0%S{-webkit-transform: scale (1); 
transform:scale (1);} 
25%{-webkit-transform:scale (0.8); 
transform: scale (0.8);} 
50%{-webkit-transform:scale (0.6); 
transform: scale (0.6);} 
60%{-webkit-transform: rotate (90deg); 
transform:rotate (90deg);} 
70%{-webkit-transform:rotate (180deg); 
transform:rotate (180deg);} 
80%{-webkit-transform:rotate (270deg); 
transform:rotate (270deg);} 
100%{-webkit-transform:rotate (360deg); 
transform:rotate (360deg);} 
} 
#photo:hover img{-webkit-animation: move 2s linear infinite; 


animation: move 2s linear infinite;} 
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</style> 
</head> 
<body> 
<article id="content"> 
<div class="article"> 
<h2>7 月 </h2> 
<div id="photo"> <a href="#"><img src="images/sara.jpg" alt="" > 
</a></div> 
<h3> 萨 拉 一 一 年 度 最 热 的 女人 </h3> 
<p> 萨 拉 一 一 年 度 最 热 的 女人 ， 没 有 你 不 能 做 到 的 。</p> 
</div> 
</article> 
</body> 
</body> 


13.3 小结 


本 章 简要 介绍 了 HTML 默认 样式 和 浏览 器 默认 样式 ， 通 过 叮 叮 书店 首页 详细 介绍 了 
CSS 导航 菜单 的 设计 过 程 ， 最 后 介绍 了 页 面 图 文 混 排 的 一 般 规 律 。 


13.4 习题 


@ 选择 题 
(1) 下 面 说 法 中 正确 的 是 ( 
A. HTML 标签 即使 没有 定义 样式 ， 也 会 呈现 一 定 的 样式 
B. HTML 没有 设 定 默认 样式 
C. 不 同 的 浏览 器 定义 的 默认 样式 没有 差别 
D. 默认 以 block 显示 
(2) 浏览 器 默认 的 字体 大 小 是 (  )。 


A. 12px B. 1l4px C. 16px D. 18px 
(3) 导航 菜单 一 般 来 说 有 ) 类 。 

| 下 . 了 2 3 D. 4 
@ 简 答 题 


(1) 如 何 清除 浏览 器 默认 的 页 边 距 ? 

(2) FF 默认 元 素 居中 的 样式 是 什么 ? 

(3) 菜单 的 内 容 结 构 一 般 用 什么 元 素 实 现 ? 
(4) 图 文 混 排 的 一 般 做 法 是 什么 ? 

(5) 如 何 建立 一 个 具有 多 级 结构 的 导航 菜单 ? 
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网 站 开发 是 一 个 比较 大 的 软件 工程 ， 要 符合 软件 工程 的 要 求 和 规律 ， 同 时 它 也 是 一 个 
复杂 的 系统 工程 ， 涉 及 许多 相关 知识 。 本 章 首先 简要 介绍 网 站 制作 流程 的 步骤 ， 接 下 来 介 
绍 模板 的 基本 概念 和 操作 ， 然 后 详细 介绍 叮 叮 书店 模板 的 创建 过 程 和 基于 模板 创建 叮 叮 书 
店 其 他 页 面 的 过 程 ， 最 后 简要 介绍 网 站 的 发 布 过 程 。 

本 章 要 点 : 

好 网 站 制作 流程 。 

妇 模板 和 基于 模板 创建 页 面 。 

好 网 站 发 布 过 程 。 


14.1 网 站 制作 流程 


网 站 开发 大 致 需要 以 下 4 个 步骤 。 

@ 需求 分 析 

在 接 到 网 站 设计 任务 后 ， 首 先 要 了 解 客户 的 业务 背景 、 目 标 和 需求 ， 这 样 才能 针对 客 
户 提 供 有 效 的 网 站 功能 。 在 建 网 站 之 前 最 好 要 明确 建立 网 站 的 目的 、 网 站 的 规模 、 网 站 的 
主要 用 户 、 投 入 预算 以 及 如 何 经 营 等 问题 ， 这 是 网 站 生存 发 展 的 关键 。 

其 次 确定 网 站 类 型 。 按 照 网 站 主体 的 性 质 不 同 ， 网 站 可 分 为 政府 网 站 、 企 业 网 站 、 商 
业 网 站 、 教 育 科 研 机 构 网 站 、 个 人 网 站 、 其 他 非 营利 机 构 网 站 以 及 其 他 类 型 等 网 站 。 
再 次 确定 网 站 内 容 。 网 站 内 容 主 要 是 确定 网 站 的 栏目 结构 和 网 站 导航 ， 不 同类 型 的 网 
站 栏目 结构 是 不 一 样 的 ， 一 般 绝 大 多 数 的 政府 网 站 都 要 提供 “政府 职能 /业务 介绍 ”“ 政 府 
新 闻 ”“ 办 事 指南 /说 明 ”“ 通 知 /公告 ”“ 便 民生 活 / 住 行 信息 ”“ 企 业 /行业 经 济 信息 ”和 “ 重 
要 网 站 链接 ”等 栏目 ， 绝 大 部 分 企业 网 站 都 提供 “企业 介绍 “产品 /服务 介绍 “企业 动态 ” 
“在 线 招聘 ”“ 用 户 咨询 /投诉 ”和 “行业 新 闻 ” 等 栏目 。 

然后 根据 需求 、 类 型 和 内 容 设 计 网 站 需 形成 的 风格 。 风 格 体现 在 网 站 名 称 、 标 志 (logo)、 
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告 语 、 标 准 色彩 和 标准 字体 等 方方面面 。 

最 后 和 客户 一 起 确认 需求 。 在 此 期 间 形 成 需求 规格 文档 , 最 好 给 客户 提供 设计 样板 (可 
用 Photoshop、Fireworks 制作 )， 和 用 户 共同 商量 确认 需求 。 

@ 网 站 制作 

1) 创建 站 点 

创建 站 点 主要 是 确定 站 点 文件 的 存放 位 置 和 目录 结构 ， 用 户 要 合理 安排 文件 的 目录 ， 
不 要 将 所 有 文件 都 存放 在 根 目 录 下 ， 要 按 栏目 内 容 建立 子 目录 ， 目 录 的 层次 不 要 太 多 ， 一 
般 不 要 超过 5 层 ， 目 录 名 不 要 使 用 中 文 。 

2) 首页 设计 

首页 设计 得 好 坏 是 一 个 网 站 成 功 与 否 的 关键 。 首 先 确定 首页 的 功能 模块 ， 然 后 进行 页 
面 布局 。 常 见 的 布局 如 下 。 

(1)“ 同 ”字形 布局 : 所 谓 “ 同 ”字形 布局 ， 就 是 指 页 面 顶 部 为 主 菜单 ， 下 方 左 侧 为 
二 级 栏目 条 ， 右 侧 为 链接 栏目 条 ， 中 间 显 示 具 体内 容 的 布局 。 这 种 布局 的 优点 是 页 面 结构 
清晰 ， 左 右 对 称 ， 主 次 分 明 ,“ 同 ”字形 布局 的 网 页 得 到 非常 普遍 的 运用 ;缺点 是 太 规矩 呆 
板 ， 如 果 细 节 色 彩 上 缺少 变化 ， 容 易 让 人 感到 单调 乏味 。 

(2)“ 国 ”字形 布局 :“ 国 ”字形 布局 是 在 “ 同 ” 字 形 布局 的 基础 上 演化 而 来 的 ， 在 
“ 同 ” 字形 布局 的 下 方 增加 一 横 条 状 的 菜单 或 广告 。 这 种 布局 的 优点 是 充分 利用 版 面 ,信息 
量 大 ， 与 其 他 页 面 链接 方便 ， 缺 点 是 页 面 拥挤 ， 四 面 封闭 。 

(3) 自由 式 布局 :自由 式 布局 打破 了 “ 同 ” 字 形 和 “ 国 ” 字 形 布局 的 结构 ， 布 局 像 一 
张 宣传 海报 ， 以 一 张 精 美 图 片 作为 页 面 的 中 心 ， 菜 单 栏目 自由 地 捍 放 在 页 面 上 ， 常 用 于 时 
尚 类 网 站 。 其 优点 是 漂亮 ,吸引 人 ; 缺点 是 显示 速度 慢 ， 文 字 信息 量 少 。 这 种 布局 适合 于 
以 图 像 为 主要 内 容 的 站 点 。 

(4) 左右 对 称 布局 : 顾名思义 ， 这 是 采取 左右 分 隔 屏幕 的 办 法 形成 的 对 称 布 局 ， 在 左 
右 部 分 内 自由 安排 文字 、 图 像 和 链接 ， 一 般 是 单 击 左边 的 链接 时 在 右边 显示 链接 的 内 容 。 
其 优点 是 可 以 显示 较 多 的 文字 、 图 像 ， 缺 点 是 将 两 部 分 有 机 结合 比较 困难 ， 不 适 于 信息 量 
大 的 网 站 。 

3) 图 像 设计 

设计 制作 网 站 需要 使 用 的 图 像 ， 包 括 logo 图 像 、 背 景 图 像 、 栏 目 图 像 和 一 些 修饰 图 


像 等 。 
4) 样式 规划 
用 CSS 实现 布局 和 外 观 ， 最 好 使 用 外 部 样式 文件 。 
5) 使 用 模板 


通过 首页 创建 模板 ， 确 定 页 面 中 的 固定 部 分 。 
6) 分 页 设计 
其 他 页 面 通 过 模板 生成 后 再 进行 设计 。 
全 测试 网 站 
网 站 的 所 有 页 面 首先 要 保证 在 Intemet Explorer 和 Mozilla Firefox 浏览 器 里 能 比较 好 地 
呈现 ， 如 果 需 要 ， 在 更 多 的 浏览 器 里 进行 测试 。 
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@ 发 布 网 站 
制作 好 的 网 站 ， 经 测试 之 后 就 可 以 在 服务 器 上 发 布 。 


14.2 ”模板 


是 每 个 页 面 都 有 的 ， 没 有 必要 在 每 个 页 面 都 重复 建立 ， 把 这 些 内 容 放 在 模 
板 里 ， 然 后 可 以 基于 模板 创建 文档 。 

@ 基于 index.html 创建 叮 叮 书店 模板 ce 

启动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html 和 外 部 样式 表 文 件 视频 讲解 
style.css (在 第 13 章 的 13.2 节 建 立 )。 

选择 【文件 】| 【新 建 】 命令 , 打开 【新 建 】 列表 框 ， 单 击 【 编 辑 文 件 模板 】])， 出 现 【 文 
件 和 代码 模板 】 对 话 框 ， 如 图 14.1 所 示 。 单 击 左上 角 的 【+】 创 建 模板 ， 在 【名 称 】 文 本 
框 中 输入 “bookstore”， 在 【扩展 】 文 本 框 中 输入 “html”， 去 掉 【 按 样式 重新 格式 化 】 复 
选 框 ,选中 【启用 实时 模板 】 复 选 框 ,然后 将 index.html 文件 的 全 部 代码 复制 ,粘贴 到 【名 
称 】 文 本 框 下 面 的 多 行文 本 框 中 ， 接 着 删除 <main> 和 </main> 标 签 之 间 的 代码 ， 将 光标 定 
位 到 <main> 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 

<! 一 -面包 恬 导 航 --> 

<section class="crumb-nav"> 您 现在 的 位 置 : <a href="index.html"> 首 页 </a> 

&gt; &gt;</section> 


如 图 14.2 所 示 ， 单 击 【 确 定 】 按 钮 。 


TF 
<title>#ll $7/thesl)e </titie> 
/head> 

<body> 

SEN 

body> 


[0 1 


a [7 EE 
图 14.1 【文件 和 代码 模板 】 对 话 框 图 14.2 【文件 和 代码 模板 】 对 话 框 
@ 修改 样式 文件 style.css 
切换 到 样式 文件 style.css 的 编辑 区 ， 定 义 面包 居 导 航 样式 。 
/* 面 包 导 导航 */ 


.crumb-nav{font-size: lrem; margin: S5px Opx;} 
.crumb-nav a{text-decoration:none;font-size: lem;color: hsl(0,0%,0%); } 
.crumb-nav a:hover {color:hsl (20,30%,50%);} 
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14.3 ”基于 模板 建立 叮 叮 书店 的 其 他 页 面 


启动 WebStorm， 打 开 叮 叮 书店 项 目 及 外 部 样式 表 文 件 style.css (在 第 
14 章 的 14.2 节 建 立 )。 


14.3.1 书籍 分 类 
选择 【文件 】 1 [新建 】 命令， 打开 【新 建 】 列表 框 ， 如 图 143 所 示 。 。 视频 讲解 


在 【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 在 【文件 名 称 】 文 
本 框 中 输入 “category”， 如 图 14.4 所 示 ， 然 后 单 击 【确定 】 按 钮 ， 进 入 categoryhtml 编辑 区 。 


目 文件 
品目 录 


国 xm 文件 

氏 stylesheet 

国 Javaseript File 
区 TypeSeript File 


i tsconfig json File 


package. json File Ws 新 建 bookstore 


风 coffesseript File 


we 
区 Jade File 
四 XSLT Stylesheet 
柄 定 
全 文 La 


图 14.3 【新 建 】 列 表 框 图 14.4 【新 建 bookstore】 列 表 框 


将 光标 定位 到 “<title>” 后 面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “书籍 分 类 ”， 再 将 
光标 移动 到 “<a hre 人 "index.html"> 首 页 </a> &gt:&gt;” 后 面 ， 插 入 “书籍 分 类 ”文本 ， 然 
后 将 光标 移动 到 “&gt&gt: 书 籍 分 类 </section>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 


<section class="list"> 

<h2> 编 程 语 言 </h2> 

<ul> 
<li><a href="details.html"><img src="images/prodl.jpg"></a></1i> 
<li><a href="details.html"><img src="images/prod2.jpg"></a></1i> 
<li><a href="details.html"><img src="images/prod3.jpg"></a></1i> 

</ul> 

<ul> 
<li><a href="details.html"><img src="images/selling2.jpg"></a></1i> 
<li><a href="details.html"><img src="images/selling4.jpg"></a></1i> 
<li><a href="details.html"><img src="images/selling5.jpg"></a></1i> 
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<div id="bar"> 


<a 
<a 
<a 
<a 
<a 
<a 
<a 
<a 
<a 
<a 


href="#" class="arrow">&lt;</a> 
href="#">1</a> 
href="#">2</a> 
href="#">3</a> 
href="#">4</a> 
href="#">5</a> 
href="#">6</a> 
href="#">7</a> 
href="#">8</a> 
href="#">9</a> 


<a href="#">10</a> 
<a href="#" class="arrow">&gt;</a> 
</div> 
</section> 


将 光标 定位 到 “<link href="style.css"” rel="stylesheet">” 后 面 ， 按 回 车 键 ， 输 入 内 部 


样式 。 


<style> 


nav ul li:nth-child(2) {background-color: hsl(20,50%,30%);} 


</style> 


切换 到 样式 文件 style.css 的 编辑 区 ， 定 义 下 面 的 样式 ， 页 面 效 果 如 图 14.5 所 示 。 


您 现在 的 位 着 : 首页 > > 书籍 分 类 


编程 语言 


曾 畅销 轿 书 

a 国 沪 二 学 3 [deep leaming] 

3 Hadoop 权 威 指南 : 大 元 据 的 存储 … 
和 秋 叶 一 起 学 PPT 第 3 版 

图 并 


四 回回 目 日 中 日 [> | 卓志 a tits 用 


图 14.5 ”category.html 示意 图 


/* 书 籍 分 类 页 面 category .html*/ 
.list h2{margin: 20px Opx;} 


.list ul{display: flex;flex-flow: row wrap;} 


.list 1i {flex: 1; min-width: 160px;margin:10px;} 


-list 1i img{border-radius: 5px;transition:all 1s ease; border: lpx solid 
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hsl(20,50%,30%);} 

.list 11:hover img{transform:scale(1.1);} 

/* 分 页 导航 样式 */ 

#bar {display: flex;justify-content: center;margin-top: 10px;} 

#bar a {font-size:lrem;text-decoration:none;color:hsl (0,0%,100%);background-— 
color: hsl1 (20,50%, 30%) ;display:inline-block;width:25px;height:25px; text— 
align: center;color:hsl(0,0%,100%);transition:all 0.5s ease;padding-top: 
3px;margin-right: 5px;} 

#bar a:hover {z-index:100;opacity:0.5;transform:scale (1.1);} 


14.3.2 ”特刊 降价 


选择 【文件 】| 【新建 】 命 令 ， 打开 【 新 建 】 列 表 框 ， 如 图 14.3 所 示 。 
在 【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 
在 【文件 名 称 ] 文 本 框 中 输入 “specials”, 单 击 [确定 按钮 , 进入 specials.html 
编辑 区 。 

将 光标 定位 到 “<title> ”后面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “特刊 降价 ”， 再 将 
光标 移动 到 “<a hre 人 "index.html"> 首 页 </a> &gt:&gt;:” 后 面 ， 插 入 “特刊 降价 ”文本 ， 然 
后 将 光标 移动 到 “&gt&gt 特 刊 降价 </section>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 


<section> 
<h2> 特 刊 降价 </h2> 
<section class="specials"> 
<a href="details.html"><img src="images/sellingl.jpg" alt="HTML5 
和 css3 实例 教程 "></a> 
<div> 
<h3>《HTML5 和 Css3 实例 教程 》</h3> 
<p> 作 者 : 霍 根 (Brian P. Hogan) (作者 ) ， 柳 靖 ( 合 著者 ) ， 李 杰 ( 译 者 ) ， 刘 晓 娜 
( 译 者 ) ， 朱 中 ( 译 者 ) </p> 
<p> 出 版 社 : 人 民 邮 电 出 版 社 ; 第 1 版 (2012 年 1 月 1 日 )</p> 
<p>《HTML5 和 CSS3 实例 教程 》 共 分 3 部 分 , 集中 讨论 了 HTML5 和 CSS3 规范 及 其 
技术 的 使 用 方法 。《HTML5 和 css3 实例 教程 》 适 合 所 有 使 用 HTML 和 css 的 Web 开 
发 人 员 学 习 参 考 。</p> 
<p><strong> 现 价 : 至 43.50</strong>&nbsp;&nbsp; 原 价 <del> 芋 52.00 
</del></p> 
</div> 
</section> 
<section class="specials"> 
<a href="details.html"><img src="images/selling2.jpg" alt= 
"JavaScript 权威 指南 "></a> 
<div> 
<h3>《JavaScript 权威 指南 》</h3> 
<p> 作 者 : ( 美 ) 弗 拉 纳 根 , 李强 ( 译 者 ) </p> 
<p> 出 版 社 : 机 械 工业 出 版 社 ; 第 1 版 (2007 年 1 月 1 日 )</p> 
<p> 总 体 上 分 为 “基础 知识 点 介绍 ”和 “参考 指南 ”两 部 分 ， 这 是 本 书 的 一 大 特色 。</p> 
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<p><strong> 现 价 : 站 43.50</strong>gnbsp; gnbsp; 原 价 <del>¥52.00 
</del></p> 
</div> 
</section> 
<section class="specials"> 
<a href="details.html"><img src="images/selling3.jpg" alt="HTML5 
权威 指南 "></a> 
<div> 
<h3>《HTML5 权威 指南 》</h3> 
<p> 作 者 : 霍 根 (Brian P- Hogan) (作者 ) ， 柳 靖 ( 合 著者 ) ， 李 杰 ( 译 者 ) ， 刘 晓 娜 
( 译 者 ) ， 朱 喝 ( 译 者 ) </p> 
<p> 出 版 社 : 人 民 邮 电 出 版 社 ; 第 1 版 (2012 年 1 月 1 日 )</p> 
<p> 本 书 是 系统 学 习 网 页 设计 和 移动 设计 的 参考 图 书 。</p> 
<p><strong> 现 价 : 于 43 .50</strong>&nbsp; gnbsp; 原 价 <del>¥¥52.00 
</del></p> 
</div> 
</section> 
</section> 


将 光标 定位 到 “<link hre 人 "style.css" rel="stylesheet"> ”后 面 ， 按 回 车 键 ， 输 入 内 部 
样式 。 
<style> 


nav ul li:nth-child(3) {background-color: hsl(20,50%,30%);} 
</style> 


切换 到 样式 文件 style.css 的 编辑 区 ， 定 义 下 面 的 样式 ， 页 面 效 果 如 图 14.6 所 示 。 


您 现在 的 位 置 : 首页 > > 特刊 降价 
特刊 降价 


《HTML5 和 C553 实 例 教程 》 


作者 : 大根 (Brian P. Hogan)( 作 者 ), 柳 铺 ( 合 车 
者 ), 李 志 合 者), 刘 ( 泽 者 ), 朱江 ( 泽 者 ) 

出 版 社 : 人 民 部 电 出 版 社 ; 第 1 版 (2012 年 1 月 1 日 ) 

《HTMLSHDCSS3 实 例 教程》 共 分 3 部 分 ,集中 讨论 。 

了 HTML5 和 CSS3 规 范 及 其 技术 的 使 用 方法 。 
《HTML5 和 CSS3 实 例 教程 》 适 合 所 有 使 用 HTML 和 
CSs 的 Web 开 发 人 员 学 习 参考 ,。 
现价 : #43.50 原价 站 52.99 


的 畅销 图 书 


深度 学 习 doop loamingl 
Hadoop 可 局 指南 : 大 数据 的 存 本 
畏 目 和 tot 起 学 PPT 第 乒 
深度 学 习 优化 与 识别 

目 Eapa、 讼 计 与 应 用 


《HTML5 权 威 指南 》 


国 图 书 分 类 KG 合作 伙伴 
作者 : 至 根 (Brian P. Hoganj( 作 者 ), 柳 靖 ( 合 著 


语言 
者 地 志 ( 至 者) 刘 s( 泽 者 ) 朱江 (至 者) 一 eA 
出 版 社 人 民 闻 电 出 版 社 ; 第 1 版 (2012 年 1 月 1 日) 图 形 图 像 清华 大 学 ! 
本 书 是 系统 学 习 网 页 设计 和 移动 设计 的 参考 图 。。 轩 全 作 pi 
和 考试 认证 中 国人 R 大 学 | 
现价 : ¥43.50 原价 #52.99 出 版 村 | 
中 国 社会 科学 J 


图 14.6 ”specials.html 示意 图 


/* 特 刊 降价 页 面 specials.html*/ 
.specials{border-bottom:hsl (0,0%, 80%) dashed lpx;border-top:hsl (0,0%,80%) 
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dashed lpx;margin: 10px Opx;display: flex;flex-flow: row wrap; padding: 10px; 
transition:background-color 1s ease;} 
.specials a{flex:1;display: block;vertical-align:bottom;min-width: 160px;} 
.specials img{width:100%;} 
-Specials div{flex:3;min-width: 260px;} 
.specials div h3{text-align: center;} 
.specials div strong{color:hsl1(0,100%,50%);} 
.specials:hover{background-color:hsl1 (20, 30%, 50%);} 
.specials:hover div, .specials:hover div h3{color: hsl(0,0%,100%);} 


14.3.3 ”联系 我 们 


选择 【文件 】| 【新建 】 命 令 ， 打 开 【 新 建 】 列 表 框 ， 如 图 14.3 所 示 。 
在 【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 视频 讲解 
在 【文件 名 称 】 文 本 框 中 输入 “contact”， 单 击 【确定 】 人 进入 contact.html 编辑 区 。 

将 光标 定位 到 “<title> ”后面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “联系 我 们 ” 再 将 
光标 移动 到 “<a hre 全 "index.html"> 首 页 </a> &gt;&gt;” 己基 插入 “联系 我 们 ”文本 ， 然 
后 将 光标 移动 到 “&gt&gt: 联 系 我 们 </section> ”后面 ， 按 回 车 键 。 

打开 叮 叮 书店 项 目 文件 contactl.html〈 在 第 7 章 的 7.3 节 建 立 )， 进 入 代码 编辑 区 ， 将 
contactl.html 页 面 中 body 里 的 内 容 复 制 到 contacthtml 编辑 区 的 光标 位 置 。 

将 光标 定位 到 “<link href-"style.css" rel=-"stylesheet"> ”后 面 ， 按 回 车 键 ， 输 入 内 部 样式 。 

<style> 

nav ul li:nth-child(4) {background-color: hsl(20,50%,30%);} 


footer ul li:last-child{background-color: hsl(20,50%,30%);} 
</style> 


切换 到 样式 文件 style.css 的 编辑 区 ， 定 义 下 面 的 样式 ， 页 面 效 果 如 图 14.7 所 示 。 


ED 书籍 分 类 特刊 降价 联系 我 们 


人 现在 的 位 是 : 首页 > > 歌 系 们 


店 成 立 于 2016 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综合 出 乒 音 
位 , 村 根 于 “清华 ” 这 庄 久 负 需 名 的 高 等 学 府 , 生 承 清华 人 “自强 不 入 ,原生 和 


年 秀和 园 :3E283 


慨 好 :网 咯 “数据 夺 “篇 各 
电子 邮件 : 
国定 电话 : 4 
饲 : 章 
?3 deep learning 
A Hadoop 梭 有 庆 南 : 大 数据 的 让 本 与 
目 f06ot_ 直 PT 第 3 乒 


日 二 =3wksig 


图 14.7 contact.html 示意 图 
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/* 联 系 我 们 页 面 contact .html*/ 

.Contacts{margin-top: lrem;} 

-Contacts p{padding:10px;} 

-Contact-form {border:hsl (20,50%, 30%) lpx dashed; font-size:1.1lrem; margin: 
0 10pzx;} 

.form-subtitle {background:hsl (20,50%,30%);color:hsl (0,0%,100%) ;padding: 
2px 5px;} 

-Contact-input {width:300px;border:hsl(0,0%,80%) lpx solid;} 

.form-row {padding:2px 10px;font-size: lrem;} 

.form-row-button {margin:5px;} 

.send {color:hs]l (0,0%,100%) ;height:30px;width:60px;text-align:center; background- 
color:hsl (20,50%, 30%) ;border: Opx;font-size:1lrem;} 


14.3.4 ”关于 我 们 


选择 【文件 】| 【新建 】 命 令 ， 打开 【 新 建 】 列 表 框 ， 如 图 14.3 所 示 。 
在 【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 
在 【文件 名 称 】 文 本 框 中 输入 “about”， 单 击 【 确 定 】 按 钮 ， 进 入 about.html 
编辑 区 。 

将 光标 定位 到 “<title> ”后面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “关于 我 们 ”， 再 将 
光标 移动 到 “<a hre 全 "index.html"> 首 页 </a> &gt;&gt;” 后 面 ， 插 入 “关于 我 们 ”文本 ， 然 
后 将 光标 移动 到 “&gt;&gt: 关 于 我 们 </section>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 


视频 讲解 


<section id="video"> 
<h2> 关 于 我 们 </h2> 
<P> 叮 叮 书店 成 立 于 1980 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综合 出 版 单位 ， 植 根 于 
“清华 ”这 座 久负盛名 的 高 等 学 府 ， 乘 承 清华 人 “自强 不 息 ， 厚 德 载 物 ”的 人 文 精神 。</p> 
<div class="video"> 
<video controls="controls" autoplay="autoplay"> 
<source src="images/book-store.mp4" type="video/mp4"> 
<source src="images/book-store.webm" type="video/webm"> 
<source src="images/book-store.ogv" type="video/ogg"> 
<p> 您 的 浏览 器 不 支持 video 元 素 。</p> 
</video> 
</div> 
</section> 


将 光标 定位 到 “<link hre 伟 "style.css" rel="stylesheet"> ”后 面 ， 按 回 车 键 ， 输 入 内 部 
样式 。 
<style> 
nav ul li:last-child{background-color: hsl(20,50%,30%);} 


footer ul li:nth-child(2) {background-color: hsl (20,50%,30%);} 
</style> 


切换 到 样式 文件 style.css 的 编辑 区 ， 定 义 下 面 的 样式 ， 页 面 效果 如 图 14.8 所 示 。 
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从 入 


首页 >> 关 于 我 们 


成 立 于 1980 年 6 月 ， 是 由 教育 芝 主 管 、 清 华 大 学 主办 的 综合 出 版 单位 ,村 
高 竺 学府 ， 委 承 清华 人 “自强 下 时， 奈 乱 吉 物 ”的 人 文 精 


这 座 久 催 二 各 1 


到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


[i 
IE 
快速 入 行 前 等 EE [a 
成 就 开发 高 手 | | 


AL 一 love coffiee love 


#3 ldeep eamingl 
四 hadooptxmarams : 大 8995 全 与 分 
ai- 起 字 PPT 第 沽 


深度 学习 优化 与 识别 


图 14.8 


/* 关 于 我 们 页 面 about .html*/ 

/*HTML5 视频 变 成 响应 式 */ 
video{max-width: 100%; height: auto;} 
#video p{margin: 10px 10px} 
.Video{text-align: center;} 


14.3.5 ”详细 内 容 


选择 【文件 】| 【新建 】 命 令 ， 打 开 


列表 框 ， 如 图 14.3 所 示 。 
在 【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 


about.html 示意 图 


视频 讲解 


在 【文件 名 称 】 文 本 框 中 输入 “details” 单 击 【确定 】 按 钮 , 进入 details.html 


编辑 区 。 
将 光标 


许 位 到 “<title>” 后 面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “详细 内 容 ”， 再 将 


光标 移动 到 “<a hre 人 "index.html"> 首 页 </a> &gt:&gt; ”后面 ， 插 入 “详细 内 容 ” 文 本 ， 然 
后 将 光标 移动 到 “&gt;&zgt; 详 细 内 容 </section>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 


<section> 
<section class="title-bar"> 
<p> 分 享 到 : </p> 


<div class="bdsharebuttonbox"><a href="#" 


class="bds more™" data= 


cmd="more"></a><a href="#" class="bds qzone" data-cmd="qzone"></a> 
<a href="#" class="bds tsina" data-cmd="tsina"></a><a href="#" 
class="bds tqq" data-cmd="tqq"></a><a href="#" class="bds renren" 
data-cmd="renren"></a><a href="#" class="bds weixin" data-cmd= 


"weixin"></a></div> 


<script>window. bd share config={"common":{"bdsnsKey":{},"bdText": 


mnm_ npdMini 
. 


papie = "dotylen mn "basizen mln 于 和 SEO 


{},"image":{"viewLbist":["qzone", "tsina", "tqq", "renren", "weixin"], 
"viewText":" 分 享 到 : ", "viewSize":"16"}, "selectShare": 
{"bdContainerClass":null,"bdSelectMiniList":["gqzone", "tsina", 
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"tqq", "renren", "weixin"] }};with (document)0[ (getElementsByTagName 
('head') [0] | |body) .appendChild (createElement ('script')) .src= 
'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593. 
js?cdnversion='+~(-new Date()/36e5)];</script> 


</section> 
<section class="information"> 
<img src="images/prod2.jpg" alt=""> 
<div class="information-title"> 
<h3>《HTML5 权威 指南 》</h3> 
<ul> 
<1i> 叮 叮 价 : 站 63.00</1i> 
<1i> 定 价 : <del>¥75.00</del></1i> 
<1i> 库 存 : <strong> 暂 时 缺 货 </strong></1i> 
<1i> 作 者 : 〈 美 ) 穆 西亚 诺 著 ， 张 洪涛 ， 邢 璐 译 </1i> 
<1i> 出 版 社 : 清华 大 学 出 版 社 </1i> 
<1i> 出 版 时 间 : 2007-4-1</1i> 
<1i> 页 数 : 661， 字 数 : 920000</1i> 
<1i> 纸 张 : 胶版 纸 </1i> 
<1i>ISBN: 9787302146933</1i> 
<1i> 包 装 : 平装 </1i> 
</ul> 
<div class="cart-more"><a href="accordion.html" class="more"> 
试 读 </a>gnbsp; <a href="cart.html" class="cart"> 加 入 购物 车 </a></div> 
</div> 
</section> 
<section class="information-content"> 
<h4> 编 辑 推荐 </h4> 
<p> 本 书 的 读者 对 象 是 任何 对 学 习 Web 语言 感 兴趣 的 读者 ， 包 括 一 般 的 使 用 者 和 专业 网 页 
设计 人 员 。</p> 
<h4> 内 容 简 介 </h4> 
<p> 作 为 一 本 权威 指南 ， 本 书 涵盖 了 最 完整 的 指南 和 实践 经 验 。 本 书 是 最 新 的 第 6 版， 新 
增加 了 对 XHTML2 和 css3 的 介绍 。</p> 
<h4> 作 者 简介 </h4> 
<p> 穆 西亚 诺 ，Chuck Musciano， 在 1982 年 从 佐治 亚 理工 学 院 计 算 机 科学 系 获得 了 学 
士 学 位 。 在 1997 年 ， 他 荣 升 为 American Kennel Club 的 首席 。</p> 
</section> 
</section> 
<section class="information-context"> 
<h4> 相 关 阅 读 </h4> 
<div> 
<div> 上 一 篇 : <a href="#">《JavaScript 权威 指南 》</a></div> 
<div> 下 一 篇 : <a href="#">《HTML5+CSS3 从 入 门 到 精通 》</a></div> 


287 | 


< 


<section class="title-bar"> 是 一 个 分 享 插件 ， 可 以 将 页 面 内 容 分 享 


</div> 


/section> 
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社交 平台 上 。 


切换 到 样式 文件 style.css 的 编辑 


大 


您 现在 的 位 置 : 首页 > > 详细 内 容 
分 字 到 :回国 司 目 四 驯 


《HTML5 权 威 指 两》 


叮 町 价 : ¥63.00 

定价 : 羊 75-69 

库存 : 暂时 缺 货 

作者 :( 美 ) 程 西 亚 湛 车 
出 版 社 : 清华 大 学 出 版 社 
出 版 时 间 : 2007-4-1 

页 数 : 661 , 字数 ; 920000 
纸张 : 胶版 纸 

ISBN : 9787302146933 
包 甘 : 平 半 


张 洪 滞 ， 邢 唤 译 


编 钼 推荐 

本 书 的 读者 对 象 是 任何 对 学 习 Web 语 言 感 兴趣 的 读者 , 包括 一 般 的 使 用 者 和 专业 网 页 设 
计 人 员 ， 
内 容 简介 


作为 一 本 权威 指南 ， 本 书 通 着 了 最 完整 的 指南 和 实践 经 验 ， 本 书 是 最 新 的 第 6 版， 新 增加 
了 对 XHTML2 和 CSS3 的 介绍 。 
作者 简介 

穆 西 亚 诺 ，Chuck Musciano ,在 1982 年 从 佐治 亚 理工 学 院 计算 机 科学 系 获得 了 学 士 学 
位 。 在 1997 年 ， 他 某 升 为 American Kennel Club 的 首席 。 


相关 阅读 
上 一 篇 : 《Javascript 权 威 指南 》 


下 -篇 :《HTML5+CSS3 从 入 门 到 精通 》 
图 14.9 details.html 示意 图 


* 详 细 内 容 页 面 details.html*/ 


于 畅销 图 书 


深度 学 习 [deep learning] 
Hadoop 权 威 指南 : 大 数据 的 存储 与 分析 ( 
目 和 set 起 学 PPT 第 3 版 

加 深度 学 习 优 化 Si 

区 块 链 原 理 、 设 计 与 应用 


国 图 书 分 类 
编程 语言 
数据 库 
图 形 加 像 
网 页 人 制作 
考试 认证 


到 QQ、 微 信 、 博 客 等 


区 ， 定 义 下 面 的 样式 ， 页 面 效 果 如 图 14.9 所 示 。 


i 
2 es 
b 


re 合作 伙伴 
中 国电 子 商务 研究 
中 心 
清华 大 学 出 版 社 
中 国人 民 大 学 出 版 
社 


中 国 社会 科学 出 版 


.information{display: flex;flex-flow: row wrap; padding: 10px;border: lpx 


solid hsl(20,50%,30%);border-radius: 5px; margin: 1l0px Opx;} 


.information 
.information 
.information 
.information-content {border-radius: 


information 


lpx solid hsl(20,50%,30%); padding: 10px;} 


.title-bar{display: 


* 分 享 工具 栏 样式 */ 
flex;flex-flow: 


padding:2px Opx;} 


.title-bar pfpadding-top: 3px;} 
.title-bar{background-color: hsl(0,0%,95%);} 


/ 
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* 相 关 阅 读 样式 */ 
information-context {margin-top: 10px;} 


information-context>div{display: 


.information-title ul{margin: 10px Opx;} 


Spx;transition:all 1s ease; 


row wrap;justify-content: 


flex;flex-flow: 


img{flex:1;border: solid lpx hsl (0,0%, 80%) ;min-width: 260px;} 
.information-title{flex:l;margin-left: 20px;} 


.information-title div{flex-flow: row wrap;} 


border: 


flex-end; 


row wrap;justify-— 
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content: space-between; font-size: lem;background-color: hsl(0,0%,90%); 
margin-top: 1l0px;padding: 6px 5px;} 

.information-context a {text-decoration:none;color:hsl (0, 0%, 0%) ;background-color: 
hsl(0,0%,95%);} 

.information-context a:hover {text-decoration:none;color:hsl (20,30%,50%);} 


14.3.6 ”购物 车 


选择 【文件 】| 【新 建 】 命令 ,打开 【新 建 】 列 表 框 ， 如 图 14.3 所 示 。 在 
【新 建 】 列 表 框 中 单 击 bookstore 模板 ， 出 现 【新 建 bookstore】 文 本 框 , 在 【[ 文 
件 名 称 】 文 本 框 中 输入 “cart”， 单 击 【确定 】 按 钮 ， 进 入 carthtml 编辑 区 。 视频 讲解 

将 光标 定位 到 “<title>” 后 面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 和 替换 为 “购物 车 ” 再 将 光 
标 移动 到 “<a hre 人 "index.html"> 首 页 </a> &gt;&gt:” 后 面 ， 插 入 “购物 车 ”文本 ， 然 后 将 
光标 移动 到 “&gt:&gt; 购物 车 </section>” 后 面 ， 按 回 车 键 。 

打开 叮 叮 书店 项 目 文件 cartl html (在 第 10 章 的 10.8 节 建立 )， 进 入 代码 编辑 区 ， 将 
cartl.html 页 面 中 body 里 的 内 容 复制 到 cart.html 编辑 区 的 光标 位 置 。 

切换 到 样式 文件 style.css 的 编辑 区 ， 将 cartl.html 页 面 中 <style> 标 签 里 的 内 容 复 制 到 
style.css 文件 下 面 。 页 面 效 果 如 图 14.10 所 示 。 


您 现在 的 位 置 : 首页 > 购物 车 


《深度 学 习 》 


《Hadoop 权 威 指南 : 大 数据 的 存储 与 分 折 》 ”| 100.00 


《深度 学 习 优化 与 识 8》 100.00 


3 件 商 品 总 价 (不合 运费 】 : ¥300.00 ”去 结算 


图 14.10 cart.html 示意 图 


PP 
14.4 ”网 站 发 布 
在 网 站 做 好 了 之 后 ， 需 要 将 网 站 的 内 容 发 布 到 Web 服务 器 上 。Apache Tomcat 可 以 构 


建 Web 服务 器 ， 属 于 轻 量 级 应 用 服务 器 ,在 中 小 型 系统 和 并 发 访问 用 户 不 是 很 多 的 场合 下 
被 普遍 使 用 ，Tomcat 是 Apache 软件 基金 会 的 一 个 免费 开源 的 项 目 。 


14.4.1 Tomcat 服务 器 的 安装 与 使 用 


Tomcat 目前 最 高 的 版 本 是 Tomcat 9.0.8， 需 要 Javag 及 以 上 版 本 支持 。 
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@ 安装 jdk 

从 “ http://www.oracle.com/technetwork/java/javase/downloads/idk8-downloads-2133151. 
html” 页 面 上 下 载 jdk8， 如 果 是 Windows 32 位 操作 系统 ， 下 载 jdk-8u171-windows-i586.exe 
文件 ， 如 果 是 64 位 操作 系统 ， 下 载 jdk-8u171-windows-x64.exe 文件 。 双 击 下 载 的 安装 文 
件 ， 按 照 安装 向 导 提 示 步 骤 进 行 安装 ， 系 统 默认 的 安装 目录 是 “C:Program 
Files\Java\jdk1.8.0_171\”， 用 户 一 般 不 需要 更 改 ， 如 图 14.11 所 示 。 


EE Java SE Development Kit 8 Update 171 - 安装 程序 Java 安装 - 目标 文件 去 - = 配 下 
« 
筷 ’Java 
欢迎 使 用 Java SE 开发 工具 包 8 Update 171 的 安装 问 导 目标 文件 夹 
本 向 导 将 指导 您 完成 Java SE 开发 工具 包 8Update 171 的 安装 过 程 。 单 击 "更 改 " 以 将 Java 安装 到 其 他 文件 去 , 
安装 到 更 改 (C)- 
CNprogram FilesJava\jre1.8.0.171 


Java Mssion Control 分 析 和 诊断 工具 套件 现在 作为 DK 的 一 部 分 提供 。 


CE ED < 上 一 步 B) | | 下 - 步 (N)> | | 


图 14.11 jdk 安装 示意 图 


@ 安装 Tomcat 

从 “https://tomcat.apache.org/download-90.cgi” 页 面 上 选择 “32-bit/64-bit Windows Service 
Installer (pgp, shal, sha512)” 安 装 版 文件 “apache-tomcat-9.0.8.exe” 下 载 Tomcat， 然 后 双击 
下 载 的 安装 文件 ， 按 照 安 装 向 导 提示 步骤 进行 安装 。 

系统 默认 的 “HTTP/1.1 Connector Port” 为 “8080”， 如 图 14.12 所 示 。 

系统 默认 的 安装 目录 是 “C:\Program Files\Apache Software Foundation\Tomcat 9.0”， 如 
图 14.13 所 示 。 


国 ”Apache Tomcat Setup: Configuration Options ~ -ED Apache Tomcat Setup 一 器 x | 
Contouration (Choose Install Location 如 
Tomcat basic configuration. Choose the foider n which toinstal Apache Tomcat 
Server Shutdown Port e005 Setup wd nstal Apache Tomcat n the flowng folder, To install n a different folder, didk 

L Browse and select another folder. Cdk Instal to start the nstalaton 
HTTP/L 1 Connector Port [aa 
AP/L3Comector Port [ao 
Wndows servce Name [Framee 
Greate shortauts for al users 口 


Tomcat Administrator Logn 。 User Name 
ptonal 


Roles |manager-gui 
< | ea> | | Cn 
图 14.12 ”Tomeat 安装 示意 图 1 图 14.13 Tomcat 安装 示意 图 2 


Tomcat 在 安装 过 程 中 会 自动 匹配 jdk 所 在 的 目录 ， 如 果 目 录 不 对 需 用 手工 方式 修改 ， 
这 个 目录 必须 和 安装 jdk 所 在 的 目录 一 样 ， 如 图 14.14 所 示 。 
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Java Vitua 


Machine 


Java vrhual Machine path sebcton 


PEase select the path of a Java SE 8.0 of later JRE nstaled on your system 


:Progran FlesVavael.8,0_171 


Nulsoft Instalis) 


ystem Va.03 


图 14.14 ” Tomcat 安装 示意 图 3 


最 后 单 击 Finish 按钮 ， 启 动 Tomcat， 启 动 成 功 后 在 任务 栏 中 可 以 看 到 Tomcat 运行 图 


标 ， 如 图 14.15 所 示 。 


© 测试 


OVWY 


图 14.15 ”Tomcat 启动 示意 图 


Apache Tomcat 9.0 Tomcat9 


也 .ul 时 


中 


打开 浏览 器 ,在 地 址 栏 中 输入 “http://localhost:8080/” 或 “http://127.0.0.1:8080/”(localhost 
被 占用 时 需要 输入 卫 地 址 )， 如 果 出 现 图 14.16 所 示 的 界面 ， 则 表示 Tomcat 启动 成 功 。 


| 移 区 < le 
SG © 0 YY [O20 


FindHelp 
Apache Tomcat/9.0.8 ff KpAcHE seomere snes 
Ifyou're seeing this, you've successiully installed Tomcat Congratulations! 
”Recommended Reading: Sones Sem 
| 

Wa Security Considerations HOW-TO Monepo App, 
Manager Applcaton HOW-TO ee 
Clustering/Session Replication HOW-TO we 


acatsamu nabs & AAA Examotes Santet Spcilicatons 
Elst ob Aootication DBC DataSourres omcat Versions 
Managing Tomcat Documentation Getting Help 
[or sccmy access nme manaoer enaop's -Jomcat 40 Documentation and Mailing Lists 
estreled Users re daned 人 EE 
Tomcat 9.9 Configuration Tne maowng mapmg ets are avatape” 
Sa /ei ere al 
Tomcat Wiki 
In Tomeat 0 0 access io the manager TD eps cementeteasea, curty 
applcalon /spa beboen digerenl uoers Fa aoamona mporant conmguraton CR 
这 oman 
rm me re ee SS we sooner 
Release Notes nase 
i Dy ny meth PS pe oranemnm Mame ores 
mee 30 os uatee mca 
和 mezaaiaapecs espe mnogo wavang corm 
Te 


- ?tl[Owsn QBmI SO 
Home Documentation Configuration Examples Wiki Mailing Lists 


Sie OTE EH 


图 14.16 ” Tomcat 界面 图 
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14.4.2 发 布 


将 WebStorm 建立 的 叮 叮 书店 项 目 所 在 的 目录 bookstore 复制 到 Tomcat 站 点 所 在 的 根 
目录 “C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT” 下 。 

打开 浏览 器 ， 在 地 址 栏 中 输入 “http://localhost:8080/bookstore/” 或 “http://127.0.0.1: 
8080/bookstore/” 即 可 在 本 机 访问 ， 如 图 14.17 所 示 。 


Madoopeumr : XRG 5A 
eter yo 
Oe sem 

em. wea 


WW 


图 14.17 叮 叮 书店 首页 示意 图 


14.5 小结 


本 章 简要 介绍 了 网 站 制作 流程 ， 详 细 介 绍 了 模板 的 基本 概念 、 叮 叮 书店 模板 的 建立 和 
基于 模板 建立 叮 叮 书店 其 他 页 面 的 过 程 ， 最 后 通过 Tomcat 说 明了 网 站 的 发 布 过 程 。 


14.6 习题 


@ 选择 题 
(1) 下 面 说 法 中 错误 的 是 〈 让 
A. 创建 站 点 要 确定 站 点 文件 的 存放 位 置 和 目录 结构 ， 要 合理 安排 文件 的 目录 
B. 建立 网 站 首先 要 了 解 客户 的 业务 背景 、 目 标 和 需求 
C. 网 站 的 所 有 页 面 保证 在 正 浏览 器 里 能 较 好 地 呈现 就 可 以 了 
D. 首页 设计 先 要 确定 功能 模块 ， 然 后 进行 页 面 布局 
(2) 下 列 关 于 模板 的 说 法 错误 的 是 〈 和 
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A. 模板 是 一 种 特殊 类 型 的 文档 ， 用 于 设计 “固定 内 容 ” 
B. 一 个 站 点 建立 一 个 模板 就 可 以 了 
C. 可 以 基于 模板 创建 站 点 的 页 面 
D. 使 用 模板 是 为 了 方便 建立 每 个 页 面 都 重复 的 内 容 

(3) Tomcat 默认 的 HITP 协议 端口 是 雹 
A. 80 B. 8080 C36 D. 8086 

四 简 答题 

(1) 网 站 开发 大 致 需要 哪些 步骤 ? 

(2) 为 什么 要 使 用 模板 ? 

(3) 安装 Tomcat 服务 器 的 主要 步骤 有 了 哪些? 
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JavaScript 是 Web 浏览 器 上 最 流行 的 脚本 语言 , 能 够 增强 用 户 与 Web 站 点 和 Web 应 用 
程序 之 间 的 交互 ， 使 用 JavaScript 能 够 通过 浏览 器 对 网 页 中 的 所 有 元 素 进行 控制 。 本 章 首 
先 介 绍 JavaScript 的 基本 组 成 和 使 用 方法 ， 然 后 介绍 ECMAScript 的 语法 基础 和 运算 符 。 

本 章 要 点 : 

4 JavaScript 基础 。 

所 ECMAScript 基础 。 

4 ECMAScript 运算 符 。 


15.1 JavaScript 基础 


15.1.1 ， JavaScript 的 历史 和 主要 功能 


@@ JavaScript 的 历史 

1992 年 ，Nombas 公司 开发 了 Cmm (C-minus-minus， 简 称 C 减 减 ) 顽 入 式 脚 本 语言 ， 
后 来 把 名 字 改 成 了 ScriptEase。 当 Netscape Navigator 思 露 头角 时 ，Nombas 开发 了 一 个 可 
以 嵌入 网 页 中 的 CEnvi 版 本 ， 这 是 第 1 个 在 Web 上 使 用 的 客户 端 脚本 语言 。 

1995 年 ，Netscape 公司 的 Brendan Eich 为 将 要 发 布 的 Netscape Navigator 2.0 开发 了 一 
个 称 为 LiveScript 的 脚本 语言 ， 在 Netscape Navigator 2.0 正式 发 布 前 ，Netscape 将 其 更 名 
为 JavaScript， 目 的 是 为 了 利用 “Java” 这 个 时 艇 词汇 。 

JavaScript 于 1996 年 3 月 在 Netscape Navigator 2.0 和 Intemet Explorer 2.0 中 发 布 为 1.0 版 。 
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JavaScript 1.1 发 布 于 1996 年 8 月 19 日 ， 在 Netscape Navigator 3.0 中 使 用 。1997 年 ， 
JavaScript 1.1 作为 一 个 草案 提交 给 欧洲 计算 机 制造 商 协会 (ECMA) 第 39 技术 委员 会 
(TC39)，TC39 在 此 基础 上 颁布 了 ECMA-262， 该 标准 定义 了 名 为 ECMAScript 的 全 新 脚 
本 语言 ， 随 后 国际 标准 化 组 织 及 国际 电工 委员 会 (ISO/IEC) 采纳 了 ECMAScript 作为 标准 
(ISO/TEC-16262)， 所 有 浏览 器 将 ECMAScript 作为 脚本 语言 实现 的 基础 。 

JavaScript 1.3 发 布 于 1998 年 10 月 19 日 ， 符 合 ECMA-262 第 1 版 和 第 2 版 的 标准 。 

JavaScript 1.5 发 布 于 2000 年 11 月 14 日 ,该 版 本 在 Netscape Navigator 6.0 和 Firefox 1.0 
中 使 用 ， 符 合 ECMA-262 第 3 版 的 标准 。 

JavaScript 1.8.5 发 布 于 2010 年 7 月 27 日 ,包括 符合 ECMA-262 第 5 版 的 许多 新 功能 。 
这 是 最 后 一 个 JavaScript 版 本 。 

2008 年 ，Chrome 浏览 器 开始 使 用 V8 引擎 , 使 得 JavaScript 脚本 语言 的 执行 速度 大 幅 提 升 。 

2009 年 ，Ryan Dahl 发 布 Nodejs，Nodejs 是 对 V8 引擎 进行 了 封装 ， 使 得 V8 在 非 浏 
览 器 环境 下 运行 得 更 好 ， 用 于 方便 地 搭建 响应 速度 快 、 易 于 扩展 的 网 络 应 用 。 

四 JavaScript 的 主要 功能 

JavaScript 提供 了 一 种 编程 工具 。JavaScript 是 一 种 拥有 极其 简单 语法 的 脚本 语言 ， 几 
乎 每 个 人 都 有 能 力 将 短小 的 代码 嵌入 到 页 面 中 。 从 技术 上 讲 ，JavaScript 是 一 种 解释 性 编程 
语言 ， 其 源 程序 脚本 〉 由 浏览 器 内 置 的 JavaScript 解释 器 动态 处 理 成 可 执行 代码 。 

JavaScript 可 以 响应 事件 。 用 户 可 以 将 JavaScript 设置 为 当 某 事件 发 生 时 才 会 被 执行 ， 
例如 页 面 载 入 完成 或 者 当 用 户 单 击 某 个 HTML 元 素 时 ，JavaScript 可 以 读 取 及 改变 HIML 
元 素 的 内 容 。 

JavaScript 可 以 被 用 来 验证 数据 。 在 表单 数据 被 提交 到 服务 器 之 前 ，JavaScript 可 以 被 
用 来 验证 这 些 数 据 。 


15.1.2 ”JavaScript 的 组 成 


如 果 从 Web 标准 行为 角度 看 ， 一 个 完整 的 JavaScript 由 以 下 3 个 部 分 组 成 。 

。 核心 (ECMAScript); 

。 文档 对 象 模型 (DOM); 

。 浏览 器 对 象 模型 (BOM)。 

@ ECMAScript 

ECMAScript 与 任何 浏览 器 无 关 ， 在 ECMA-262 标准 中 描述 为 “ECMAScript 可 以 为 不 
同 种 类 的 宿主 环境 提供 核心 的 脚本 编程 能 力 ， 因 此 核心 的 脚本 语言 是 与 任何 特定 的 宿主 环 
境 分 开 进行 规定 的 ”。Web 浏览 器 对 于 ECMAScript 来 说 只 是 一 个 宿主 环境 ， 且 不 是 唯一 的 
宿主 环境 ， 还 有 其 他 各 种 宿主 环境 ， 例 如 Adobe Flash 中 的 ActionScript。 

ECMAScript 仅仅 是 一 个 描述 , 定义 了 脚本 语 ECMAScript 
言 的 所 有 属性 、 方 法 和 对 象 ， 其 他 脚本 语言 可 以 
基于 ECMAScript 作为 功能 的 基准 来 实现 并 允许 。 Jivascript ActionSeript SeriptEase 
进行 扩充 ， 如 图 15.1 所 示 。 

ECMAScript 有 不 同 的 版 本 ，ECMA-262 第 3 


图 15.1 ECMAScript 基准 示意 图 
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版 提供 了 对 字符 串 处 理 、 错 误 定义 和 数值 输出 的 更 新 ， 增 加 了 正则 表达 式 、 新 的 控制 语句 
和 try…catch 异常 处 理 的 支持 ,以 及 一 些 为 使 标准 国际 化 而 做 的 改动 ， 所 有 主流 的 Web 浏览 
器 脚本 语言 都 遵守 ECMA-262 第 3 版 。 目 前 ECMAScript 最 新 的 版 本 是 ECMA-262 第 8 版 。 
@ DOM 
DOM (文档 对 象 模型 ) 是 HTML 和 XML 的 ”Lm 


应 用 程序 接口 (APID)。DOM 把 整个 页 面 看 成 由 节 和 
点 层级 构成 的 文档 ， 称 为 文档 树 ，HTML 或 XML 匿 
页 面 的 每 个 部 分 都 是 一 个 节点 的 衍生 物 。 下 面 的 代 tite 
码 用 DOM 绘制 成 的 节点 层次 图 如 图 15.2 所 示 。 
Sample Page 
<html> 
<head> 
<title>Sample Page</title> — body 
</head> L 
<body> p 
<p>hello world!</p> 
</body> Hello World! 
</html> 
图 15.2 用 DOM 绘制 的 节点 层次 图 


DOM 通过 创建 树 来 表示 文档 ， 从 而 使 开发 者 
对 文档 的 内 容 和 结构 进行 控制 ， 用 DOM 可 以 轻松 地 删除 、 添 加 和 替换 节点 。 

©@ BOM 

下 3.0 和 Netscape Navigator 3.0 开始 提供 了 BOM (浏览 器 对 象 模型 )， 可 以 对 浏览 器 
窗口 进行 访问 和 操作 ， 使 用 BOM 可 以 移动 窗口 、 改 变 状态 栏 中 的 文本 以 及 执行 其 他 与 页 面 
内 容 不 直接 相关 的 动作 。 由 于 没有 相关 的 BOM 标准 ， 每 种 浏览 器 都 有 自己 的 BOM 实现 。 


15.1.3” ”JavaScript 的 使 用 


@ <script> 标 签 
<script> 标 签 用 于 定义 客户 端 脚本 。 在 HIML 中 ， 使 用 的 JavaScript 代码 必须 放 在 
<script> 中 。script 元 素 既 可 以 包含 脚本 语句 ， 也 可 以 通过 src 属性 指向 外 部 脚本 文件 。 
表 15.1 列 出 了 script 标签 属性 。 
表 15.1 script 标签 属性 


属 值 描述 
typpe | MIME-type 脚本 MIME 类 型 ，HTML5 不 再 是 必需 的 ， 可 以 省 略 
charset | charset 外 部 脚本 文件 使 用 的 字符 编码 


外 部 脚本 文件 的 URL 
异步 执行 脚本 《〈 仅 适用 于 外 部 脚本 ) 
是 否 对 脚本 的 执行 进行 延迟 ， 直 到 页 面 加 载 为 止 


JavaScript 代码 插入 到 HTML 页 面 需要 使 用 <scrip 亿 标签， 用 type 属性 来 定义 脚本 


[a 


语言 
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[ 贺 15.1 js(script).html, 使 用 了 JavaScript 脚本 语句 document write 向 


源 代码 如 下 : 


<head> 
<title>Javascript</title> 
<script> 

document .write ("Hello World!"); 
</script> 

</head> 

<body></body> 


四 JavaScript 脚本 程序 的 位 置 
页 面 中 的 JavaScript 脚本 程序 会 在 页 面 载 入 浏览 器 后 立即 执行 ， 如 果 希 望 浏览 者 触发 


某 个 事件 时 才 执 行 脚本 程序 ， 应 该 使 用 函数 。JavaScript 脚本 代码 可 以 放 在 页 面 内 ， 也 可 以 
放 在 独立 的 外 部 文件 中 。 


1) 使 用 内 部 JavaScript 
在 网 页 文件 的 <script></scrip 亿 标签 中 直接 编写 JavaScript 脚本 代码 ， 这 是 用 得 最 多 的 


情况 ,<script></scrip 亿 标签 的 位 置 不 是 固定 的 , 可 以 出 现在 <head></head> 或 <body></body> 
的 任何 位 置 。 在 一 个 HTML 文档 中 可 以 有 多 段 JavaScript 代码 ， 每 段 代码 可 以 相互 访问 。 


一 个 外 部 文件 之 中 ， 用 .js 扩展 名 保存 文件 。 页 面 通 过 <scripf> 标 签 中 的 src 
属性 来 使 用 外 部 JavaScript 文件 。 


(1) 位 于 head 脚本 。 
把 脚本 放 到 <head></head> 中 ， 可 以 确保 在 需要 使 用 脚本 之 前 它 已 经 被 载 入 了 。 
<head> 


<script> 


</script> 
</head> 


(2) 位 于 body 脚本 。 
<body> 


<script> 


</script> 
</body> 


2) 使 用 外 部 JavaScript 
如 果 在 若干 个 页 面 中 运行 同样 的 JavaScript 脚本 程序 , 可 以 将 JavaScript 脚本 代码 写 入 


[ 贺 15.2 js(script-src).html， 在 该 页 面 中 使 用 了 外 部 JavaScript。 
源 代码 如 下 : 
<head> 视频 讲解 
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<title> 外 部 JavaScript</title> 

<script src="js/external.js"></script> 
</head> 

<body></body> 


外 部 JavaScript 文件 js/externaljs 的 源 代码 如 下 : 


document .write ("Hello World!"); 
提示 : 外 部 脚本 文件 不 能 包含 <script> 标 签 。 


@ 脚本 载 人 和 延迟 执行 

在 HIMLS 之 前 ， 当 浏览 器 加 载 页 面 时 ， 如 果 script 引用 了 一 个 外 部 JavaScript 脚本 文 
件 ， 则 浏览 器 在 读 取 时 将 暂停 页 面 的 加 载 工 作 ， 发 出 一 个 下 载 JavaScript 脚本 文件 的 请 求 ， 
然后 开始 下 载 脚本 文件 ， 脚 本 文件 下 载 完 成 后 继续 执行 页 面 的 加 载 工 作 。 如 果 脚 本 文件 比 
较 大 ， 则 会 成 为 页 面 加 载 时 间 的 一 个 瓶颈 。 

为 了 解决 这 个 问题 ， 在 HTML5 中 script 元 素 新 增 了 async 属性 与 defer 属性 ， 它 们 的 
作用 都 是 加 快 页 面 的 加 载 速度 ， 使 脚本 代码 的 读 取 不 再 影响 页 面 上 其 他 元 素 的 加 载 。 当 使 
用 这 两 个 属性 时 ， 在 浏览 器 发 出 下 载 脚本 文件 的 请 求 ， 开 始 脚本 文件 的 下 载 工作 后 ， 立 即 
继续 执行 页 面 的 加 载 工作 。 脚 本 文件 下 载 完成 时 触发 onload 事件 ， 可 以 通过 监听 该 事件 及 
指定 事件 处 理 函 数 来 指定 当 脚 本 文件 下 载 完成 时 所 需要 执行 的 一 些 处理 。 

这 两 个 属性 的 区 别 仅 在 于 何 时 执行 onload 事件 处 理 函 数 ， 当 使 用 async 属性 时 ， 脚 本 
文件 下 载 完成 后 立即 执行 该 事件 处 理 函 数 ， 所 以 如 果 页 面 中 使 用 了 多 个 外 部 脚本 文件 ， 且 
均 为 这 些 外 部 脚本 文件 使 用 async 属性 ， 则 这 些 外 部 脚本 文件 的 onload 事件 处 理 函数 的 执 
行 顺序 并 不 与 页 面 代码 中 这 些 外 部 脚本 文件 的 引用 顺序 保持 一 致 ， 一 旦 某 个 外 部 脚本 文件 
下 载 完成 ， 立 刻 执行 该 脚本 文件 的 onload 事件 处 理 函 数 。 

当 使 用 defer 属性 时 ， 脚 本 文件 下 载 完 成 后 并 不 立即 执行 该 脚本 文件 的 onload 事件 处 
理 函数 , 而 是 等 到 页 面 全 部 加 载 完 成 后 才 执 行 该 脚本 文件 的 onload 事件 处 理 函 数 , 所 以 如 果 
页 面 中 使 用 了 多 个 外 部 脚本 文件 ， 且 均 为 这 些 外 部 脚本 文件 使 用 defer 属性 ， 则 在 页 面 加 载 
完成 后 按 这 些 外 部 脚本 文件 的 引用 顺序 来 执行 这 些 外 部 脚本 文件 的 onload 事件 处 理 函数 。 


15.1.4 ” JavaScript 消息 框 


j JavaScript 脚本 可 以 在 浏览 器 窗口 中 创建 3 种 消息 框 ， 即 : 警告 框 、 确 认 框 和 提示 框 。 
@ 等 告 杠 
警告 框 经 常用 于 提供 某 些 信息 给 用 户 。 当 警告 框 出 现 后 ， 用 户 需要 单 击 【确定 】 按 钮 

才能 继续 进行 操作 。 其 语法 如 下 : 


window.alert ("文本 ") 或 alert ("文本 ") 


“yy 


确认 框 经 常用 于 让 用 户 验证 或 者 接受 某 些 信息 。 当 确认 框 出 现 后 ， 用 户 需要 单 击 【 确 
定 】 或 者 【取消 】 按 钮 才能 继续 进行 操作 ,如果 用 户 单 击 【 确 定 】 按 钮 ， 那 么 返回 值 为 tue; 
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如 果 用 户 单 击 【 取 消 】 按 钮 ， 那 么 返回 值 为 false。 其 语法 如 下 : 


Window.confirm(" 文 本 ") 或 confirm(" 文 本 ") 


@ 提示 框 

提示 框 经 常用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 当 提示 框 出 现 后 ， 用 户 需 要 输入 
某 个 值 ， 然 后 单 击 【 确 定 】 或 【取消 】 按 钮 才能 继续 操作 。 如 果 用 户 单 击 【 确 定 】 按 钮 ， 
那么 返回 值 为 输入 的 值 ， 如 果 用 户 单 击 【取消 】 按 钮 ， 那 么 返回 值 为 null。 pain [a] 
其 语法 如 下 : i yr 


Window.prompt ("文本 ", "默认 值 ") 或 prompt ("文本 ", "默认 值 ") 
贺 1s3 js(alerD html， 在 该 页 面 中 使 用 了 3 种 消息 框 ， 警 告 框 如 图 加 
15.3 所 示 ， 确 认 框 如 图 15.4 所 示 ， 提 示 框 如 图 15.5 所 示 。 


视频 讲解 


来 自 网 页 的 消息 ”区 ] 


警 肖 杠 
sy) Hello Yorlal 


CC 要 


图 15.3 和 警告 框 图 15.4 确认 框 


Explorer 用 户 提示 


脚本 提示 


Ee 
[EE] 


图 15.5 ”提示 框 

源 代码 如 下 : 
<head> 
<title> 提 示 框 </title> 
<script> 
alert (" 和 警告 框 \nHello World!"); 
if (confirm(" 确 认 框 \n 你 确定 吗 ?") ) { 

document .write ("确定 !");} 
elsef{ 

document .write ("不 确定 !") ;} 
document .write (prompt ("提示 框 \n 请 输入 文本 :", "文本 ") ); 
</script> 
</head> 
<body> 
</body> 


15.1.5 ”开发 者 工具 Console : 
怪 


户 可 以 在 Chrome 浏览 器 提供 的 开发 者 工具 Console 控制 台 上 输入 视频 讲解 
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JavaScript 脚本 语句 并 执行 ， 具体 操作 如 下 : 打开 Chrome 浏览 器 ， 按 F12 键 进入 开发 者 工 
具 界 面 ， 单 击 Console， 或 直接 按 Ctrl+ShiftrJ 组 合 键 ， 在 “>” 符 号 后 面 输入 语句 并 按 回 
车 键 直接 执行 ， 按 向 上 或 向 下 的 方向 键 可 以 选择 重复 执行 刚刚 输入 过 的 语句 或 命令 ， 

图 15.6 所 示 。 


民品 Elements Console Sources Network Performance Memory » @6| : MX| 


中 © |top v | Filter Default levels ” 回 Group similar 草 
© Failed to 1oad resource: net::ERR_FAILED doodle.js:1 

© Failed to load resource: net::ERR_FAILED thumb/:1 

© Failed to load resource: net::ERR_FAILED thumb/:1 

© Failed to 1oad resource: net::ERR_FAILED thumb/:1 

© Failed to load resource: net::ERR_FAILED one-google.js:1 

> console.log(abc) 

© *Uncaught ReferenceError: abc is not defined VM456:1 


at anonymous>:1:13 
> var iNum=19 
undefined 
> console.1log(iNum) 
19 VM464:1 


undefined 


已 
全 
上 
§ 


bk 
全 
E 
§ 


图 15.6 Chrome 开发 者 工具 控制 台 界面 
在 Console 中 右 击 ,在 快捷 菜单 中 选择 Clear Console 命令 可 以 清除 Console 的 历史 记录 。 


15.2 ”ECMAScript 基础 


15.2.1 ECMAScript 语法 基础 


@ 区 分 大 小 写 

ECMAScript 的 变量 、 函 数 名 、 运 算 符 等 区 分 大 小 写 。 

@ 纹 类 型 变量 

ECMAScript 中 的 变量 无 特定 的 类 型 ,在 定义 变量 时 只 用 var 运算 符 ， 可 以 初始 化 为 任 
意 值 ， 随 时 改变 变量 所 存 数据 的 类 型 。 例 如 : 

Var sColor="red"; 


var iNum=25; 


@ 每 行 结尾 的 分 号 可 有 可 无 
ECMAScript 用 分 号 表示 结束 一 行 代码 ， 如 果 没 有 分 号 ，ECMAScript 就 把 换行 代码 的 
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尾 看 作 该 语句 的 结尾 ， 最 好 的 代码 编写 习惯 是 加 入 分 号 。 
@ 注释 
注释 有 以 下 两 种 类 型 : 
(1) 单行 注释 以 双 和 斜 杠 开头 (//)。 
(2) 多 行 注释 以 单 斜 杠 和 星 号 开头 (/*)， 以 星 号 和 单 斜 杠 结尾 (*/)。 
代码 块 
代码 块 表示 一 系列 按 顺序 执行 的 语句 ， 这 些 语 句 被 封装 在 “{” 和 “}” 之 间 。 例 如 
if (sTest=="red") { 
Sest= blue 2 
alert (sTest); 
} 


15.2.2 ”ECMAScript 变量 


@ 声明 变量 
ECMAScript 中 的 变量 用 var 运算 符 加 变量 名 定义 ， 语 法 如 下 : 
var 变量 名 [= 初 值 ] [，…]; 


其 中 ， 关 键 字 var 可 省 略 ， 结 尾 处 的 分 号 可 用 空白 符 代 替 。 例 如 ， 


var sTest=" 测 试 "; 

以 上 声明 了 一 个 变量 sTest， 初 始 化 值 为 字符 串 “ 测 试 ”。 

用 户 可 以 用 一 个 var 语句 定义 两 个 或 多 个 变量 ， 变 量 类 型 不 必 相 同 ， 例 如 : 
var sTest=" 测 试 "，iAge=25; 

声明 变量 并 不 一 定 要 初始 化 。 例 如 : 

var sTest; 


变量 可 以 存放 不 同类 型 的 值 ， 例 如 可 以 把 变量 初始 化 为 字符 串 类 型 的 值 ， 然 后 设置 为 


var sTest=" 测 试 "; 
sTest=55; 


在 使 用 变量 时 , 好 的 编码 习惯 是 始终 存放 相同 类 型 的 值 。 另外, 变量 声明 不 是 必需 的 。 
@ 命名 变量 

变量 的 命名 需要 遵守 以 下 两 条 简单 的 规则 : 

(1) 第 1 个 字符 必须 是 字母 、 下 画 线 (_) 或 美元 符号 〈$)。 

(2) 余下 的 字符 可 以 是 下 画 线 、 美 元 符号 、 任 何 字 母 或 数字 字符 。 

下 面 的 变量 名 都 是 合法 的 : 


Var test; 


Var S$test; 
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在 定义 变量 进行 命名 时 经 常 使 用 以 下 方法 : 


1) Camel 标记 法 


首 字母 小 写 ， 接 下 来 的 单词 首 字 母 都 以 大 写字 符 开头 。 例 如 : 


var myTestValue=0，mySecondValue=" 测 试 "7 


2) Pascal 标记 法 


首 字母 大 写 ， 接 下 来 的 单词 首 字母 都 以 


var MYyTestValue=0，MyYSecondValue=" 测 试 "7 


3) 匈牙利 类 型 标记 法 


写字 符 开头 。 例 如 : 


在 以 Pascal 标记 法 命名 的 变量 前 附加 一 个 小 写字 母 ， 说 明 该 变量 的 类 型 ， 如 i 表示 整 


数 ，s 表示 字符 串 等 ， 见 表 15.2。 例 如 : 
var iMyTestValue=0，sMySecondValue=" 测 试 "; 
表 15.2 变量 名 前 缀 示意 表 

类 型 示例 
数组 | a | aValues 
布尔 型 | oo | bFound 
汪 上 《天 
函数 | mm | fnMethod 
至 型 《攻守 ) ER 二 
对 象 | oType 
正则 表达 式 | re | rePattern 
字符 申 | | sValue 
CBE 人 E 何 天 而 ) 


15.2.3 ”ECMAScript 关键 字 和 保留 字 


@ ECMAScript 关键 字 


ECMA-262 定义 了 ECMAScript 关键 字 (keyword)， 这 些 关 键 字 标识 了 ECMAScript 
语句 的 开头 或 结尾 。 关 键 字 是 保留 的 ， 不 能 用 作 变 量 名 或 函数 名 。 下 面 是 ECMAScript 关 


键 字 : 


break, case, catch, continue, default, delete, do, else, finally, for、 function, 


if、 in、 instanceof, new、 return、, switch, this, throw, try、 typeof、 var、 void, 


while 和 with 


如 果 把 关键 字 用 作 变 量 名 或 函数 名 ， 可 能 得 到 诸如 "Identifier Expected" (应 该 有 标识 
符 或 期 望 标识 符 ) 这 样 的 错误 消息 。 


加 ECMAScript 保留 字 


ECMA-262 定义 了 ECMAScript 保留 字 (reserved word)， 保 留 字 一 般 指 为 将 来 的 关键 


字 而 保留 的 单词 ,保留 字 不 能 被 上 
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abstract、 boolean、, byte、 char、, class、 const、 debugger、 double、 enum, export、 
extends, final, float, goto, implements、, import, int、 interface, long, native、 
package、private,protected,public, short, static, super, synchronized, throws、 
transient 和 volatile 


如 果 把 保留 字 用 作 变 量 名 或 函数 名 ， 那 么 除非 将 来 的 浏览 器 实现 了 该 保留 字 ， 和 否则 很 
可 能 收 不 到 任何 错误 消息 。 


15.2.4 ” ECMAScript 基本 数据 类 型 


ECMAScript 有 5 种 基本 数据 类 型 ， 即 Undefined、Null、Boolean、Number 和 String。 

@ Undefined 类 型 

Undefined 类 型 只 有 一 个 值 一 一 undefined。 当 声明 的 变量 未 初始 化 时 , 变量 的 默认 值 是 
undefined。 例 如 : 


Var oTemp; 

声明 的 变量 oTemp 没有 初始 值 , 将 被 赋予 值 undefined。 用 户 可 以 在 Chrome 浏览 器 开 
发 者 工具 控制 台 上 输入 并 验证 。 

加 Null 类 型 

Null 类 型 只 有 一 个 值 一 null。 值 undefined 实际 上 是 从 null 派生 而 来 的 ， 因 此 
ECMAScript 把 它们 定义 为 相等 的 。 例 如 : 

null==undefined; // 结 果 为 true 

尽管 这 两 个 值 相等 ， 但 含义 不 同 。undefined 是 声明 了 变量 但 未 对 其 初始 化 时 赋予 变量 
的 值 ，null 则 用 于 表示 尚未 声明 的 变量 。 

全 Boolean 类 型 

Boolean 类 型 有 true 和 false 两 个 值 。 

四 Number 类 型 

Number 类 型 既 可 以 表示 32 位 的 整数 ， 也 可 以 表示 64 位 的 浮 点 数 ， 直 接 输入 的 任何 
数字 都 被 看 作 Number 类 型 。 例 如 下 面 代码 声明 了 存放 整数 值 的 变量 : 

var iNum=86; 

1) 八进制 数 和 十 六 进 制 数 

整数 也 可 以 表示 为 八进制 或 十 六 进 制 ， 八 进 制 数 的 首 数字 必须 是 0， 其 后 的 数字 可 以 
是 任何 八进制 数字 (0 一 7)， 例 如 : 

var iNum=070; ”//070 等 于 十 进 制 的 56 

十 六 进 制 数 的 前 两 位 数字 必须 为 0x&， 然 后 是 任意 的 十 六 进 制 数字 (0~9 和 A~F)， 
字母 不 区 分 大 小 写 。 例 如 : 

var iNum=0xlf; //0Oxlf 等 于 十 进 制 的 31 


所 有 数学 运算 返回 的 结果 都 是 十 进 制 。 
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2) 浮 点 数 

浮 点 值 必须 包括 小 数 点 和 小 数 点 后 的 一 位 数字 。 例 如 : 

Var fNum=5.0; 

3) 科学 记 数 法 

对 于 非常 大 或 非常 小 的 数 , 可 以 用 科学 记 数 法 表示 浮 点 数 , 即 把 一 个 数 表示 为 数字 ( 包 
括 十 进 制 数 字 ) 加 e (或 E)， 后 面 加 乘 以 10 的 倍数 。 例 如 : 

Var fNum=5.618e7; 

把 科学 记 数 法 转化 成 计算 式 就 可 以 得 到 该 值 , 即 5.618X10”=56180000。 非常 小 的 数 常 
常用 科学 记 数 法 表示 ， 例 如 0.00000000000000008 可 以 表示 为 8-e17。ECMAScript 默认 把 
6 个 和 6 个 以 上 前 导 0 的 浮 点 数 转换 成 科学 记 数 法 。 

4) 特殊 Number 值 

NaN 是 一 个 特殊 值 ， 表 示 非 数 (Nota Number)。 这 种 情况 一 般 发 生 在 数据 类 型 转换 失 
败 时 。 例 如 把 单词 blue 转换 成 数值 就 会 失败 ， 因 为 没有 与 之 等 价 的 数值 。NaN 不 能 用 于 算 
术 计算 。 

isNaN() 函 数 能 够 判断 一 个 数 是 不 是 非 数 。 例 如 : 


isNaN ("测试 "); // 结 果 为 true 
isNaN("666") ; // 结 果 为 false 
人 String 类 型 


String 类 型 是 没有 固定 大 小 的 数据 类 型 ， 可 以 用 字符 串 存 储 零 或 更 多 的 字符 。 字 符 串 
中 的 每 个 字符 都 有 特定 的 位 置 ， 首 字符 从 位 置 0 开始 ， 第 2 个 字符 在 位 置 1， 依 此 类 推 。 
字符 串 中 最 后 一 个 字符 的 位 置 一 定 是 字符 串 的 长 度 减 1。 

字符 串 必 须 由 双 引 号 〈") 或 单 引 号 (') 括 起 来 声明 。 例 如 ， 

WaSCOlGr 一 ed 

VarTsColor2= rod 


使 用 反 斜 枉 可 以 向 字符 串 添加 换行 符 、 引 号 和 其 他 特殊 字符 。 表 15.3 列 出 了 常用 的 特 
殊 字符 。 


表 15.3 常用 的 特殊 字符 


户 可 以 使 用 typeof 运算 符 来 判断 一 个 值 的 基本 数据 类 型 , typeof 运算 符 有 一 个 参数 ， 
即 要 检查 的 变量 或 值 。 例 如 : 


Var sTemp=" 测 试 "; 
typeof sTemp; // 结 果 为 "string" 
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typeof 86; // 结 果 为 "number" 
typeof 运算 符 将 返回 下 列 值 之 一 。 

(1) undefined: 如 果 变 量 是 Undefined 类 型 的 。 
(2) boolean: 如 果 变 量 是 Boolean 类 型 的 。 

(3) number: 如 果 变 量 是 Number 类 型 的 。 

(4) string: 如 果 变 量 是 String 类 型 的 。 

(5) object: 如 果 变 量 是 引用 类 型 或 Null 类 型 的 。 


15.2.5” ECMAScript 类 型 转换 


旦 序 设计 语言 最 重要 的 特征 之 一 是 具有 数据 类 型 转换 的 能 力 ，ECMAScript 提供 了 简 
单 的 类 型 转换 方法 。 
@ 转换 成 字符 串 
基础 数据 类 型 Boolean 和 Number 都 有 toString() 方 法 , 可 以 把 它们 的 值 转换 成 字符 串 。 
Boolean 类 型 的 toString() 方 法 只 能 输出 “true” 或 “false”， 结 果 由 变量 的 值 决定 。 例 
如 : 


Var bFound=false; 
bFound.tostring (); // 结 果 为 false 


Number 类 型 的 toString0 方 法 有 两 种 模式 默认 模式 和 基 模 式 。 在 默认 模式 中 ， 无 
论 最 初 采 用 什么 表示 法 声明 数字 ，toString0 返 回 的 都 是 数字 的 十 进 制 表 示 。 例 如 ， 


var iNum=10; 


Var fNum=10.0; 


iNum.tostring(); 


fNum.tostring(); 


基 模 式 可 以 用 不 同 的 基 输 出 数字 ， 二 进 制 的 基 是 2， 八 进 制 的 基 是 8， 十 六 进 制 的 基 
是 16， 基 是 toString() 方 法 的 参数 。 例 如 : 


var iNum=10; 


iNum.tostring (2); 


iNum.tostring (8); 


iNum.tostring (16); 


// 结 果 为 10 
// 结 果 为 10 


// 结 果 为 1010 
// 结 果 为 12 
// 结 果 为 A 


@ 转换 成 数字 
ECMAScript 提供 了 两 种 把 非 数字 的 原始 值 转换 成 数字 的 方法 ， 即 parseInt0 和 


parseFloat()， 前 者 把 值 转换 成 整数 ， 后 者 把 值 转换 成 浮 点 数 ， 只 有 对 String 类 型 调用 这 些 
方法 才能 正确 运行 ， 其 他 类 型 调用 返回 的 值 是 NaN。 


1) parseInt() 
parseInt() 方 法 首先 查看 位 置 0 处 的 字符 ， 判 断 它 是 否 为 一 个 有 效 数字 ， 如 果 不 是 ， 返 


回 NaN, 不 再 继续 执行 其 他 操作 。 但 如 果 该 字符 是 有 效 数字 ， 该 方法 将 查看 位 置 1 处 的 字 
符 ， 进 行 同样 的 测试 。 这 一 过 程 持续 到 发 现 非 有 效 数字 的 字符 为 止 ，parseInt0 将 把 该 字符 
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之 前 的 字符 串 转换 成 数字 。 例 如 : 


Var iNum=parseInt ("12345red"); // 返 回 12345 
Var iNum=parseInt ("OxA"); // 返 回 10 
var iNum=parseInt ("56.9"); // 返 回 56 
var iNum=parseInt ("red"); // 返 回 NaN 


提示 : 对 于 整数 来 说 ， 小 数 点 是 无 效 字符 。 

2) parseFloat() 

parseFloat() 方 法 和 parseInt() 方 法 的 处 理 方式 相似 ， 从 位 置 0 开始 查看 每 个 字符 ， 直 到 
找到 第 1 个 非 有 效 的 字符 为 止 ， 然 后 把 该 字符 之 前 的 字符 串 转 换 成 整数 。parseFloat() 方 法 


规定 第 1 个 出 现 的 小 数 点 是 有 效 字 符 ， 如 果 有 多 个 小 数 点 ， 从 第 2 个 小 数 点 起 将 被 看 作 是 
无 效 的 ，parseFloat() 会 把 第 2 个 小 数 点 之 前 的 字符 转换 成 数字 。 例 如 : 

var fNum=parseFloat ("12345red"); // 返 回 12345 

var fNum=parseFloat ("11.2"); // 返 回 11.2 

var fNum=parseFloat ("11.22.33"); // 返 回 11.22 

var fNum=parseFloat ("red"); // 返 回 NaN 

图 强制 类 型 转换 


用 户 可 以 使 用 强制 类 型 转换 〈type casting) 来 处 理 转换 值 的 类 型 ， 在 ECMAScript 中 
可 以 使 用 下 面 3 种 强制 类 型 转换 。 

。 Boolean(value):; 把 给 定 的 值 转换 成 Boolean 型 。 

。Number(value): 把 给 定 的 值 转换 成 数字 (可 以 是 整数 或 浮 点 数 )。 

。 String(value): 把 给 定 的 值 转换 成 字符 串 。 

1) Boolean() 函 数 

当 要 转换 的 值 至 少 有 一 个 字符 的 字符 串 、 非 0 数字 或 对 象 时 , Boolean() 函 数 将 返回 true。 
如 果 该 值 是 空 字符 串 、 数 字 0、undefined 或 null， 将 返回 false。 例 如 : 


Var bBoolean=Boolean ("hello"); // 返 回 true- 非 空 字符 串 
Var bBoolean=Boolean (50) 7 // 返 回 true- 非 零 数字 
Var bBoolean=Boolean (nul1) // 返 回 false-null 
var bBoolean=Boolean (0); // 返 回 false- 零 

Var bBoolean=Boolean ("") 7 // 返 回 false- 空 字符 串 


2) Number0 函 数 

Number() 函 数 与 parseInt0 和 parseFloat() 方 法 的 功能 相似 , 但 它 转换 的 是 整个 值 ， 而 不 
是 部 分 值 。parseInt() 和 parseFloat() 方 法 只 转换 第 1 个 无 效 字符 之 前 的 字符 串 ， 因此 “1.2.3” 
将 分 别 被 转换 为 “1” 和 “1.2”。 用 Number0 进 行 强制 类 型 转换 ,“1.2.3” 将 返回 NaN， 因 
为 整个 字符 串 值 不 能 转换 成 数字 。 表 15.4 列 出 了 不 同 值 调 用 Number() 函 数 的 结果 。 

3) String0 函 数 

String0 强 制 类 型 转换 可 以 把 任何 值 转换 成 字符 串 。String() 与 toString0 唯 一 不 同 的 是 对 
null 和 undefined 值 强制 类 型 转换 可 以 生成 字符 串 而 不 引发 错误 。 例 如 : 
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表 15.4 不 同 值 调用 Number() 函 数 的 结果 表 


用 法 
Number(false) 
Number(true) 
Number(undefined) 


用 法 
Number("1.2") 
Number(“12”) 
Number(50) 


Number(null) 

var sTest=String (null); // 返 回 "null" 

Var oNull=null; 

var sTest=oNull.tostring(); // 会 引发 "oNul1 is nul1" 错 误 


15.3 “ECMAScript 运算 符 


15.3.1 一 元 运算 符 


-元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 
@ void 
void 运算 符 对 任何 值 都 返回 undefined。 
@ 前 增 量 /前 减 量 运算 符 
所 谓 前 增 量 运 算 符 ， 就 是 在 数值 类 型 变量 原 值 的 基础 上 加 1， 形 式 是 在 变量 前 放 两 个 
加 号 〈++)。 例 如 ， 


var iNum=10; 
++iNum; 


第 2 行 代码 把 iNum 值 增加 到 了 11， 实 质 上 等 价 于 : 

var iNum=10; 

iNum=iNum + 1; 

前 减 量 运算 符 是 在 数值 类 型 变量 原 值 的 基础 上 减 1, 形式 是 在 变量 前 放 两 个 减 号 (一 )。 
例如 : 

var iNum=10; 

—-iNum; 

在 算术 表达 式 中 ， 前 增 量 和 前 减 量 运算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 的 
顺序 计算 ， 无 论 是 前 增 量 还 是 前 减 量 运算 符 都 发 生 在 计算 表达 式 之 前 。 例 如 : 

var iNuml=2; 

var iNum2=20; 

Var iNum3=--iNuml + ++iNum2; // 等 于 22 


var iNum4=iNuml + iNum2; W222 
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iNum3 等 于 22， 因 为 表达 式 要 计算 的 是 1+ 21。 变 量 iNum4 也 等 于 22， 也 是 1+21。 
提示 : 在 计算 表达 式 一 iNuml + +HiNum2 之 前 ，iNuml 已 经 减 1，iNum2 已 经 加 1 。 
@ 后 增 量 /后 减 量 运算 符 
后 增 量 运算 符 也 是 给 数值 类 型 变量 在 原 值 的 基础 上 加 1， 形 式 是 在 变量 后 放 两 个 加 号 
(++)。 例 如 : 


var iNum=10; 

iNum++; 

后 减 量 运算 符 也 是 从 数值 类 型 变量 在 原 值 的 基础 上 减 1， 形 式 为 在 变量 后 加 两 个 减 号 
(一 )。 例 如 : 

var iNum=10; 

iNum-——; 

与 前 增 量 和 前 减 量 运算 符 不 同 的 是 ， 后 增 量 和 后 减 量 运算 符 是 在 计算 过 包含 它们 的 表 
达 式 后 才 进 行 增 量 或 减 量 运算 的 。 考虑 以 下 的 例子， 


var iNum=10; 


iNum-——; 

iNum; // 输 出 9 
iNum-——; // 输 出 9 
iNum; // 输 出 8 


第 4 行 代码 输出 iNum 一 的 值 ， 由 于 减 量 运算 发 生 在 计算 过 表达 式 之 后 ， 所 以 输出 的 
数 是 "9"。 第 5 行 代 码 输出 的 数 是 "8"， 因 为 在 执行 第 4 行 代码 之 后 和 执行 第 $ 行 代 码 之 前 
执行 了 后 减 量 运算 。 

在 算术 表达 式 中 ， 后 增 量 和 后 减 量 运 算 符 的 优先 级 是 相同 的 ， 要 按照 从 左 到 右 的 顺序 
计算 。 例 如 ， 

Var iNuml=2; 

Var iNum2=20; 

Var iNum3=iNuml-- + iNum2++; /7/ 等 于 22 

var iNum4=iNuml + iNum2; // 等 于 22 

iNum3 等 于 22， 因 为 表达 式 要 计算 的 是 2 + 20。 变 量 iNum4 也 等 于 22， 不 过 计算 的 
是 1+21， 因 为 增 量 和 减 量 运 算 都 在 给 INum3 赋值 后 才 发 生 。 

@ 一 元 加 法 和 一 元 减法 

一 元 加 法 本 质 上 对 数字 无 任何 影响 。 一 元 减法 就 是 对 数值 求 负 。 例 如 : 

var iNum=20; 


iNum=-iNum; 


iNum; // 结 果 为 -20 


15.3.2 ”算术 运算 符 


算术 运算 符 用 于 执行 变量 之 间 的 算术 运算 。 表 15.5 列 出 了 算术 运算 符 。 
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表 15.5 算术 运算 符 


运算 符 描述 
除 
和 求 余数 〈 保 留 整数 ) 
@ 加 法 运算 符 


加 法 运算 符 用 加 号 (+) 表示。 如果 某 个 运算 数 是 字符 串 ， 那 么 采用 下 列 规则 : 
(1) 如 果 两 个 运算 数 都 是 字符 串 ， 把 第 2 个 字符 串 连 接 到 第 1 个 上 。 
(2) 如 果 只 有 一 个 运算 数 是 字符 串 ， 则 把 另 一 个 运算 数 转换 成 字符 串 ， 结 果 是 两 个 字 
符 串 连接 成 的 字符 串 。 例 如 : 


Var iResult=5 + 5; // 两 个 数字 

iResult; // 结 果 为 10 

Var sResult=5 + "5"; // 一 个 数字 和 一 个 字符 串 
sResult; // 结 果 为 "55" 

@ 减法 运算 符 


减法 运算 符 用 减 号 (-) 表示 。 如 果 运 算 符 不 是 数字 ， 那 么 结果 为 NaN; 如 果 运 算数 
都 是 数字 ， 那 么 执行 常规 的 减法 运算 ， 并 返回 结果 。 

@ 乘法 运算 符 

乘法 运算 符 用 星 号 〈*) 表示 ， 用 于 两 数 相 乘 。 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 
乘法 运算 ， 即 两 个 正 数 或 两 个 负数 ， 结 果 为 正 数 ， 两 个 运算 数 符 号 不 同 ， 结 果 为 负数 ， 如 
果 某 个 运算 数 是 NaN， 结 果 为 NaN。 

@ 除法 运算 符 

除法 运算 符 用 和 斜 杠 (/) 表示 ， 用 第 2 个 运算 数 除 第 1 个 运算 数 。 如 果 运 算数 是 数字 ， 
那么 执行 常规 的 除法 运算 ， 即 两 个 正 数 或 两 个 负数 ， 结 果 为 正 数 ， 两 个 运算 数 符号 不 同 ， 
结果 为 负数 ， 如 果 某 个 运算 数 是 NaN， 结 果 为 NaN。0 除 任何 一 个 非 无 穷 大 的 数字 ， 结 果 
为 NaN。 


@ 取 模 运 算 符 

取 模 (余数 ) 运算 符 用 百 分 号 (%) 表示 。 例 如 : 

var iResult=26%5; VT 

如 果 运 算数 是 数字 ， 那 么 执行 常规 的 算术 除法 运算 ， 返回 除 法 运算 得 到 的 余数 。 如 果 


被 除数 为 0， 结果 为 0。 


15.3.3 ”关系 运算 符 


关系 运算 符 执行 的 是 比较 运算 。 每 个 关系 运算 符 都 返回 一 个 Boolean 值 。 表 15.6 列 出 
了 关系 运算 符 。 

@ 常规 比较 方式 

关系 运算 符 小 于 、 大 于 、 小 于 等 于 和 大 于 等 于 执行 的 是 两 个 数 的 比较 运算 ， 比 较 方式 


309 | 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 〈 第 2 版 ) 
与 算术 比较 运算 相同 。 每 个 关系 运算 符 都 返回 一 个 Boolean 值 。 例 如 : 


Var bResult1l=2 > 1 // 返 回 true 
Var bResult2=2 < 1 // 返 回 false 


表 15.6 关系 运算 符 


描 述 


小 于 
大 于 或 等 于 
小 于 或 等 于 


全 等 〈 值 和 类 型 ) 
不 等 于 
大 于 


对 于 字符 串 ， 第 1 个 字符 串 中 每 个 字符 的 代码 都 会 与 第 2 个 字符 串 中 对 应 位 置 的 字符 
的 代码 进行 数值 比较 ， 完 成 这 种 比较 操作 后 ， 返 回 一 个 Boolean 值 。 大 写字 母 的 代码 小 于 
小 写字 母 的 代码 ， 例 如 : 


Var bResult="Blue" < "alpha"; 
bResult; // 结 果 为 true 


如 果 要 强制 性 得 到 按照 真正 的 字母 顺序 比较 的 结果 ， 必 须 把 两 个 字符 串 转换 成 相同 的 
大 小 写 形式 ， 然 后 再 进行 比较 。 例 如 : 


Var bResult="Blue".toLowerCase() < "alpha".toLowerCase(); 
bResult; // 结 果 为 false 


@ 比较 数字 和 字符 串 

无 论 何 时 比较 一 个 数字 和 一 个 字符 串 ，ECMAScript 都 会 把 字符 串 转换 成 数字 ， 然 后 
按照 数字 顺序 比较 它们 。 例 如 : 

Var bResult="25" < 3; 

bResult; // 结 果 为 false 


字符 串 “25” 将 被 转换 成 数字 25， 然 后 与 数字 3 进行 比较 。 
任何 包含 NaN 的 关系 运算 符 都 要 返回 false。 


Var bResult="a" >= 3; 
bResult; // 结 果 为 false 


@ 等 于 和 不 等 于 

等 于 用 双 等 号 〈 一 ) 表示 ， 当 且 仅 当 两 个 运算 数 相等 时 返回 tue。 不 等 于 用 感叹 号 加 
等 号 〈!=) 表示 ， 当 且 仅 当 两 个 运算 数 不 相等 时 返回 true。 为 确定 两 个 运算 数 是 否 相 等 ， 
这 两 个 运算 符 都 会 进行 类 型 转换 。 执 行 类 型 转换 的 规则 如 下 : 

(1) 如 果 一 个 运算 数 是 Boolean 值 , 在 检查 相等 性 之 前 转换 成 数字 。 其 中 值 false 为 0， 
true 为 1。 

(2) 如 果 一 个 运算 数 是 字符 串 ， 男 一 个 是 数字 ， 在 检查 相等 性 之 前 尝试 把 字符 串 转换 
成 数字 。 

(3) 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 字符 串 ， 在 检查 相等 性 之 前 尝试 把 对 象 转换 成 
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字符 串 。 

(4) 如 果 一 个 运算 数 是 对 象 , 另 一 个 是 数字 , 在 检查 相等 性 之 前 尝试 把 对 象 转换 成 数字 。 

在 比较 时 ， 遵 守 下 列 规则 : 

(1) 值 null 和 undefined 相等 。 

(2) 在 检查 相等 性 时 不 能 把 null 和 undefined 转换 成 其 他 值 。 

(3) 如 果 某 个 运算 数 是 NaN， 等 于 返回 false， 不 等 于 返回 true。 

(4) 如 果 两 个 数 都 是 NaN， 等 于 返回 false， 因 为 根据 规则 ，NaN 不 等 于 NaN。 

@ 全 等 和 非 全 等 

全 等 用 3 个 等 号 表示 (一 =)， 非 全 等 用 感叹 号 加 两 个 等 号 (!==) 表示 ， 在 检查 相等 
性 前 不 执行 类 型 转换 ， 只 有 在 无 须 类 型 转换 运算 数 就 相等 的 情况 下 才 返 回 true。 例 如 : 


var sNum="66"; 


var iNum=66; 

SNum==iNum; // 结 果 为 true 

SNum===iNum; // 结 果 为 false 

使 用 等 于 来 比较 字符 串 “66” 和 数字 66， 输 出 tue， 因 为 字符 串 “66” 将 被 转换 成 数 
字 66， 然 后 与 另 一 个 数字 66 进行 比较 。 全 等 在 没有 类 型 转换 的 情况 下 比较 字符 串 和 数字 ， 
所 以 输出 false。 


15.3.4 ”逻辑 运算 符 


表 15.7 列 出 了 逻辑 运算 符 。 


表 15.7 逻辑 运算 符 
运 算 符 描 述 
&& AND 
| OR 
! NOT 
@ NOT 运算 符 


NOT 运算 符 用 感叹 号 (1) 表示, NOT 运算 返回 的 是 Boolean 值 。 NOT 运算 的 行为 如 下 : 

(1) 如 果 运 算数 是 对 象 ， 返 回 false。 

(2) 如 果 运 算数 是 数字 0， 返 回 tue。 

(3) 如 果 运 算数 是 0 以 外 的 任何 数字 ， 返 回 false。 

(4) 如 果 运 算数 是 null， 返 回 true。 

(5) 如 果 运 算数 是 NaN， 返 回 true。 

(6) 如 果 运 算数 是 undefined， 发 生 错 误 。 

四 AND 运算 符 

AND 运算 符 用 双 和 号 (&&) 表示 。AND 运算 在 两 个 运算 数 都 是 true 的 情况 下 结果 才 
等 于 true。 

AND 运算 的 运算 数 可 以 是 任何 类 型 的 ， 不 仅仅 是 Boolean 值 。 如 果 某 个 运算 数 不 是 
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Boolean 值 ，AND 运算 并 不 一 定 返 回 Boolean 值 。 其 规则 如 下 : 

(1) 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 Boolean 值 ， 返 回 该 对 象 。 

(2) 如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 2 个 对 象 。 

(3) 如 果 某 个 运算 数 是 null， 返 回 null。 

(4) 如 果 某 个 运算 数 是 NaN， 返 回 NaN。 

(5) 如 果 某 个 运算 数 是 undefined， 发 生 错误 。 

AND 运算 是 简便 运算 ， 即 第 1 个 运算 数 就 决定 了 结果 。 如 果 第 1 个 运算 数 是 false， 
那么 无 论 第 2 个 运算 数 的 值 是 什么 ， 结 果 都 不 可 能 等 于 true。 

例如 下 面 的 例子 : 

Var bTrue=true; 

var bResult=(bTrue && bUnknown); //bUunknown 没有 定义 


因为 变量 bUnknown 是 未 定义 的 ，bResult 的 值 是 undefined。 

修改 这 个 例子 ,把 第 1 个 数 设 为 false 就 不 会 发 生 错 误 , 因为 第 1 个 运算 数 的 值 是 false。 

Var bFalse=false; 

Var bResult=(bFalse && bUnknown); 

bResult; // 结 果 为 false 

人 @ OR 运算 符 

OR 运算 符 用 双 竖 线 (||) 表示 ，OR 运算 在 两 个 运算 数 有 一 个 是 true 的 情况 下 结果 就 
是 true。 

与 AND 运算 符 相 似 , 如 果 某 个 运算 数 不 是 Boolean 值 , OR 运算 并 不 一 定 返 回 Boolean 
值 。 其 规则 与 AND 运算 符 不 同 的 是 ， 如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 1 个 对 象 。 

OR 运算 也 是 简便 运算 。 对 于 逻辑 OR 运算 符 来 说 ， 如 果 第 1 个 运算 数 的 值 为 true， 就 
不 再 计算 第 2 个 运算 数 。 


15.3.5 “其 他 运算 符 


@ 条 件 运 算 符 

条 件 运 算 符 是 三 元 运算 符 ， 有 3 个 参数 ， 语 法 如 下 : 

variable=(boolean expression) ? true value : false value; 

条 件 运 算 符 是 根据 boolean expression 的 计算 结果 有 条 件 地 为 变量 赋值 。 如 果 
Boolean_expression 为 tue， 就 把 tue_value 赋 给 变量 ;如 果 它 是 false， 就 把 false_value 赋 
给 变量 。 例 如 : 

var iNuml=3; 

var iNum2=5; 

Var iMax=(iNuml > iNum2) ? iNuml : iNum2; 

iMax; // 结 果 为 5 

人 @ 赋值 运算 符 

简单 赋值 运算 用 等 号 (=) 表示 ， 是 把 等 号 右边 的 值 赋予 等 号 左边 的 变量 。 例 如 : 
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var iNum=10; 


复合 赋值 运算 用 算术 运算 符 加 等 号 (=) 表示 。 例 如 语句 : 


iNum=iNum + 10; 


可 以 用 复合 赋值 运算 符 代 替 : 


iNum+=10; 
表 15.8 列 出 了 使 用 的 主要 赋值 运算 符 。 
表 15.8 赋值 运算 符 


运 算 符 等 ” 价 
+= X=x+ty 
一 4 
4 Xx*y 
后 X=x/y 
%= X=X%y 
人 @@ 过 号 运算 符 


用 逗号 运算 符 可 以 在 一 条 语句 中 执行 多 个 赋值 。 例 如 : 


Var iNuml=1, iNum=2, iNum3=3; 


15.4 小结 
本 章 简 要 介绍 了 JavaScript 的 基本 组 成 和 使 用 方法 , 详细 介绍 了 ECMAScript 的 语法 基 
础 和 运算 符 。 
日 
15.5 “习题 


@ 选择 题 
(1) 运行 下 面 的 JavaScript 代码 ，sM 的 值 为 〈 % 


iNum=11; 
sStr="number"; 


sM=iNum+sStr; 


A. llnumber B. Number CW D. 程序 报错 
(2) 在 HIML 页 面 中 使 用 外 部 JavaScript 文件 的 正确 语法 是 js 
A. <language="JavaScript" src="sf.js"> 


B. <script src="sfjs"></script> 


C. <script language="JavaScript"=sf.js></script> 
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D. <language src="sf.js"> 
(3) 运行 下 面 的 JavaScript 代码 ， 警 告 框 中 显示 〈 狼 


X=37 
Y=27 
z= (X+2) /Y7 
alert (z); 
A. 2 B25 C: 3 D. 16 


(4) 分 析 如 下 的 JavaScript 代码 片段 ，b 的 值 为 《 )。 


Var a=1.5,b; 
b=parseInt (a); 


A. 2 B. 05 Ls | D5 
(5) 若 定 义 variX=10， 则 ( ”) 语句 执行 后 变量 这 的 值 不 等 于 11。 

A. iX++; B. 这 =11; C.， 这 一 11; D. 这 + 一 1; 
@ 简 答 题 


(1) JavaScript 是 一 种 什么 样 的 语言 ? 与 Java 语言 有 什么 关系 ? 

(2) 在 HIML 文档 中 如 何 定义 和 使 用 脚本 语言 ? 

(3) ECMAScript 有 哪些 数据 类 型 ? 

(4) 变量 说 明 语 法 “var 变量 名 [= 初 值 ][…]:” 中 的 关键 字 “var” 和 分 号 “;” 可 以 省 
略 吗 ? 省 略 后 有 没有 什么 影响 ? 

(5) ECMAScript 提供 了 哪些 数据 类 型 转换 方法 ? 
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算法 可 以 理解 为 由 基本 运算 及 规定 的 运算 顺序 所 构成 的 完整 的 解 题 步 又 。 程 序 是 为 实 
现 特定 目标 或 解决 特定 问题 而 用 计算 机 语言 编写 的 语句 (命令) 序列 集合 ， 这 些 语句 序列 
的 先后 是 由 算法 决定 的 。 本 章 首先 介绍 算法 的 基本 概念 ， 接 下 来 详细 介绍 实现 算法 的 
ECMAScript 基本 语句 ， 然 后 简单 介绍 使 用 WebStorm 和 Chrome 调试 JavaScript 脚本 程序 
的 方法 和 步骤 。 

本 章 要 点 : 

他 算法 的 概念 。 

< 如 ECMAScript 语句 。 

信使 用 WebStormn 和 Chrome 调试 JavaScript 脚本 程序 。 


16.1 算法 
16.1.1 算法 的 概念 


算法 是 对 操作 的 描述 ， 即 操作 步 又， 做 任何 事情 都 有 一 定 的 步骤 。 为 解决 一 个 问题 而 
采取 的 方法 和 步骤 称 为 算法 。 计 算 机 算法 是 指 计算 机 能 够 执行 的 算法 。 

计算 机 算法 可 分 为 两 大 类 ， 即 数值 运算 算法 和 非 数 值 运算 算法 。 数 值 运算 算法 的 目的 
是 求 数值 解 ， 例 如 求 方程 的 根 等 都 属于 数值 运算 范畴 。 非 数值 运算 包括 的 范畴 更 广 ， 最 常 
见 的 是 用 于 管理 领域 ， 例 如 图 书 检索 和 工资 管理 等 。 在 现实 生活 中 计算 机 在 非 数值 运算 方 
而 的 应 用 远 远 超过 数值 运算 方面 。 由 于 数值 运算 有 现成 的 数值 模型 ， 可 以 运用 数值 分 析 方 
法 或 者 采用 近似 方法 求解 ， 因 此 对 数值 运算 的 研究 比较 深入 ， 算 法 比较 成 熟 。 非 数值 运算 
的 种 类 比较 多 ， 问 题 千 差 万 别 ， 相 应 的 算法 也 是 千变万化 ， 难 以 规范 化 。 

一 个 完整 的 算法 应 包括 设计 算法 和 实现 算法 两 个 部 分 。 在 用 计算 机 解 题 时 根据 事先 设 
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计 好 的 算法 写 出 程序 ， 然 后 运行 此 程序 实现 算法 。 
16.1.2 ”简单 算法 举例 


如 果 求 1X2X3X4X5， 如 何 描述 算法 ? 

@ 原始 方法 

又 1; 先 求 1X2， 得 到 结果 2。 

上 又 2: 将 步骤 1 得 到 的 乘积 2 乘 以 3， 得 到 结果 6。 

上 又 3: 将 6 再 乘 以 4， 得 24。 

上 又 4: 将 24 再 乘 以 5， 得 120。 

这 样 的 算法 虽然 正确 ， 但 太 烦 琐 ， 倘 若 求 更 多 数 的 阶乘 ， 描 述 算法 的 步骤 更 多 。 
@ 改进 算法 

步骤 1: 使 三 1。 

步骤 2: 使 二 2。 

步骤 3: 使 tXi， 乘 积 仍然 放 在 变量 t 中 ， 可 表示 为 tXi 一 t。 
步骤 4: 使 i 的 值 +1， 即 计 1 一 i。 

步骤 $: 若 i<5， 返 回 重 新 执行 步骤 3 以 及 其 后 的 步骤 4 和 步骤 5$， 否 则 算法 结束 。 
如 果 计 算 100!， 只 需 将 步骤 5 的 1<5 改 成 i<100 即 可 。 

如 果 求 1X3X5X7X9X11， 算 法 也 只 需 做 很 少 的 改动 。 
步骤 1: 1 一 t。 

步骤 2: 3 一 i。 

步骤 3: tXi 一 t。 

步骤 4: it2 一 i。 

步骤 5$: 若 i<11， 返 回 步骤 3， 否 则 算法 结束 。 

算法 不 仅 正 确 ， 而 且 是 计算 机 能 够 实现 的 比较 好 的 算法 。 


16.1.3 ”算法 的 特性 


算法 具有 以 下 特性 。 

(1) 有 穷 性 : 一 个 算法 应 包含 有 限 的 操作 步骤 而 不 能 是 无 限 的 。 

(2) 确定 性 : 算法 中 的 每 一 个 步骤 应 当 是 确定 的 ， 不 能 是 含糊 、 模 棱 两 可 的 。 
(3) 有 零 个 或 多 个 输入 。 

(4) 有 一 个 或 多 个 输出 。 

(5) 有 效 性 : 算法 中 的 每 一 个 步骤 应 当 能 有 效 地 执行 ， 并 得 到 确定 的 结果 。 


16.1.4 ”算法 与 程序 


程序 是 为 实现 特定 目标 或 解决 特定 问题 而 用 计算 机 语言 编写 的 语句 (命令 ) 序列 集合 ， 
所 有 的 程序 都 是 用 茶 一 种 计算 机 语言 的 语句 按照 算法 进行 设计 实现 的 ， 程 序 有 3 种 基本 结 


NC 
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构 ， 即 顺序 结构 、 选 择 结构 和 循环 结构 。 
对 于 程序 员 来 说 ， 必 须 会 设计 算法 ， 并 根据 算法 用 计算 机 语言 写 出 程序 。 


16.2 ECMAScript 语句 


16.2.1 条 件 语句 


@ 站 语句 
1) 单个 让 语句 
其 语法 如 下 : 


if(condition){ 
Statement1 
} 

elsel{ 
statement2 
} 


其 中 ，condition 可 以 是 任何 表达 式 ， 计算 的 结果 如 果 不 是 Boolean 值 ， ECMAScript 会 把 它 
转换 成 Boolean 值 。 如 果 condition 的 计算 结果 为 tue， 则 执行 statement1， 如 果 condition 
的 计算 结果 为 false， 则 执行 statement2。 

圆 161 js(if1) html， 输 出 两 个 数 的 最 大 者 。 


var fNuml=parseFloat (prompt ("请 输入 第 1 个 数 : ") ) ; 
var fNum2=parseFloat (prompt ("请 输入 第 2 个 数 : ") ) ; 
document .write ("你 输入 了 两 个 数 ， 分 别 是 : "+fNum1l+" 和 "+fNum2+"<br />") 
if (fNuml>fNum2) { 

document .write (" 两 个 数 中 最 大 者 是 "+fNum1l) 

} 
elsel{ 

document .write (" 两 个 数 中 最 大 者 是 "+fNum2) ; 

} 


提示 : promptO 接 收 的 是 String 类 型 数据 ， 所 以 必须 转换 成 数值 类 型 。 
男 外， 下 语句 可 以 嵌 套 。 

轩 ]16.2 js(if2)html， 把 3 个 数 按 从 大 到 小 的 顺序 显示 输出 。 

Var fNuml=parseFloat (prompt ("请 输入 第 1 个 数 : ") ) ; 

var fNum2=parseFloat (prompt ("请 输入 第 2 个 数 : ") ) ; 

Var fNum3=parseFloat (prompt ("请 输入 第 3 个 数 : ") ) ; 

document .write ("你 输入 了 3 个 数 , 分 别 是 : "+ fNuml +", "+ fNum2 +", "+ fNum3 +"<br />"); 


/13 个 数 的 最 大 者 互 换 到 fNuml 中 
if (fFNum1<fNum2) { 


加 A 
视频 讲解 
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// 嵌 套 if 语句 

if (fNum2<fNum3) { 

fTemp=fNuml; 

fNuml=fNum3; 

fNum3=fTemp; 


} 

elsef 
fTemp=fNuml; 
fNuml=fNum2; 
fNum2=fTemp; 

} 


’ 
if (fNum2<fNum3) { 
fTemp=fNum2; 
fNum2=fNum3; 
fNum3=fTemp; 
} 
document .write ("3 个 数 从 大 到 小 分 别 是 : "+ fNuml +", "+ fNum2 +", "+ fNum3); 


2) 多 个 让 语句 
站 语 句 可 以 串联 多 个 使 用 。 其 语法 如 下 : 


if(conditionl){ 
Statement1 

}else if(condition2)1{ 
statement2 

}else{ 
statement3 

} 


如 果 condition1 的 计算 结果 为 tue， 则 执行 statement1， 如 果 condition2 的 计算 结果 为 
true， 则 执行 statement2， 和 否则 执行 statement3 。 

圆 163 js(if3).html， 输 入 学 生成 绩 并 判断 数据 的 合理 性 ， 如 果 合 理 ， 给 出 对 应 考查 
成 绩 。 


var fsScore=parseFloat (prompt ("请 输入 学 生成 绩 : ") ) ; 
if (fsScore<0){ 
document .write ("数据 输入 错误 ! ") ; 
}else if(fScore<60)1{ 
document .write ("不 及 格 "); 
}else if(fScore<70)1{ 
document .write ("及 格 "); 
}else if(fscore<80){ 
document .write ("中 等 "); 
}else if(fScore<90)1{ 
document .write ("良好 "); 
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}else if(fScore<=100) { 

document .write ("优秀 "); 
}elsef{ 

document .write ("数据 输入 错误 ! "); 
} 


四 switch 语句 
switch 语句 的 语法 如 下 : 


Switch (expression){ 

case value:{statement}; 
break; 

case value:{statement}; 
break; 

case value:{statement}; 
break; 

case value: {statement}; 
break; 


case value: {statement}; 
break; 
default:{statement}; 
} 


switch 语句 为 表达 式 提供 一 系列 情况 (case), 每 个 情况 (case) 都 是 表示 “如 果 expression 
等 于 value， 就 执行 statement”。 关 键 字 break 会 使 代码 跳出 switch 语句 ， 如 果 没 有 关键 字 
break, 代码 的 执行 就 会 继续 进入 下 一 个 case。 关键 字 default 说 明了 表达 式 的 结果 不 等 于 任 
何 一 种 情况 时 执行 的 操作 。 

switch 语句 可 以 替代 串联 多 个 让 语句 ， 特 别 是 当 条 件 比 较 多 并 且 值 比较 单一 的 情况 。 

[ 贺 16.4 js(switch).html， 日 期 对 象 的 getDay0 方 法 返回 的 是 星期 中 的 某 天 ， 值 是 0 一 
6 的 整数 ， 可 以 用 switch 语句 把 对 应 的 整数 变 成 中 文 显示 。 


Var oDt=new Date(); 

Var iWeekDay=oDt .getDay() 

Switch (iWeekDay) { 

case 0: 
document .write (" 今 天 是 星期 日 ") 
break; 

Case T's 
document .write ("今天 是 星期 一 "); 
break; 

CASE 2 
document .write ("今天 是 星期 二 "); 
break; 

CASS 3 
document .write ("今天 是 星期 三 "); 


319 | 


| eb 前 端 设 计 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


break; 

Case 4: 
document .write ("今天 是 星期 四 "); 
break; 

Case 5: 
document .write ("今天 是 星期 五 "); 
break; 

case 6: 
document .write ("今天 是 星期 六 "); 
break; 

default: 
document .write ("数据 错误 ! ") ; 

} 


16.2.2 ”循环 语句 


循环 语句 又 叫 迭 代 语 句 , 用 于 声明 一 组 需要 重复 执行 的 命令 , 直到 满足 某 些 条 件 为 止 。 

© while 语句 

while 语句 是 前 测试 循环 , 循环 退出 的 条 件 是 在 执行 循环 内 部 代码 之 前 计算 的 , 因此 循 
环 主体 可 能 根本 不 被 执行 。 其 语法 如 下 : 

while (expression) { 


statement 
} 


当 expression 的 结果 为 真 时 执行 statement, 直到 expression 的 结果 为 假 
时 退出 循环 。 

[ 贺 16.5 js(whilel).html, 求 1X2X3X4X5 的 积 。 其 中 ,变量 iResult 
存放 结果 ，iCyv 为 循环 变量 ， 用 于 控制 循环 执行 有 限 次 数 。 


Var iResult=1; 


视频 讲解 
Var iCv=2; 
while(icv<=5){ 
iResult=iResult*iCv; 
CVRD 
} 
document .write ("5! 是 : "+iResult); 


[ 贺 16.6 js(while2).html， 求 1+2+3+…+100 的 和 。 


var iResult=0; 
Var iCv=1; 
while(icv<=100){ 
iResult=iResult+iCv; 
1CV++> 
} 
document .write ("1-100 的 和 是 : "+iResult); 
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四 do-while 语句 

do-while 语句 是 后 测试 循环 ， 即 退出 条 件 在 执行 循环 内 部 的 代码 之 后 计算 。 这 意味 着 
在 计算 表达 式 之 前 至 少 会 执行 循环 主体 一 次 。 其 语法 如 下 : 

dof{ 


statement 
}while (expression) 


首先 执行 statement， 然 后 计算 expression， 如 果 结 果 为 真 ， 重 复 执行 statement， 直 到 
expression 的 结果 为 假 时 退出 循环 。 
[ 圆 167 js(do whilel)html， 求 1X2X3X4X5 的 积 。 


var iResult=17 
Var iCv=2; 
dof{ 
iResult=iResult*iCv; 
iCv++; 
}while (iCcv<=5) 
document .write ("5! 是 : "+iResult); 


[ 贺 16.8 js(de while2)html， 求 1f2+3+…+100 的 和 。 


Var iResult=0; 
Var iCv=1; 
dof 
iResult=iResult+iCv; 
iCv++;? 
}while (icv<=100) 
document .write ("1-100 的 和 是 : "+iResult); 


图 for 语句 

for 语句 是 前 测试 循环 , 而 且 在 进入 循环 之 前 能 够 初始 化 变量 , 并 定义 循环 后 要 执行 的 
代码 。 其 语法 如 下 : 

for (initialization;expression;post-loop-expression){ 


statement 
} 


其 中 ，initialization 定义 循环 变量 并 初始 化 ，expression 定义 循环 控制 表达 式 ， 
post-loop-expression 定义 循环 变量 值 变 化 的 表达 式 ， 之 后 不 能 写 分 号 ， 否 则 将 无 法 运行 。 
[ 贺 16.9 js(for1).html， 求 1X2X3X4X5 的 积 。 


Var iResult=1; 

for (iCv=2;iCv<=5;iCv++){ 
iResult=iResult*iCv; 
1 


document .write ("5! 是 : "+iResult); 
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[ 圆 16.10 js(for2)html， 求 1+2+3+…+100 的 和 。 


Var iResult=0; 


for (iCv=17iCv<=1007iCVv++) { 


iResult=iResult+iCv; a 四 
} 视频 讲解 
document .write ("1-100 的 和 是 : "+iResult); 
四 for-in 语句 
for-in 语句 用 于 枚 举 〈 一 一 列举 ) 对 象 的 属性 或 集合 中 的 元 素 。 其 语法 如 下 : 


for (Property in expression){ 


statement 

} 
其 中 ，property 定义 对 象 属性 或 集合 元 素 的 循环 控制 变量 ，expression 定义 上 
对 象 或 集合 。 a 


辆 1611 js(for-in) html, 在 该 页 面 中 用 forin 语句 显示 全 局 对 象 的 所 “ 国 ; 
有 隐 式 或 显 式 声明 的 全 局 变量 属性 ， 这 里 的 全 局 对 象 指 的 是 window 对 象 ， 视频 讲解 
显示 的 是 window 对 象 的 所 有 属性 和 方法 ,如 图 16.1 所 示 。 


源 代 码 如 下 
源 代码 如 下 : © [localhost:69342/exanpI 9 | EE 
灌 可 用 “ 口 helz 有 护 “ 中 20 网 站 导航 » 
<head> < 
cxtczmel || 
<title>for-in 循环 </title> a 
四 speechSynthesis 
<script> caches 
for (oProp in this) { elt oes 


wetkitStorageInfo 

indexedDB 
wetkitIndexedDB 

} ondeviceorientation 


document .write (oProp + "<br />"); 


ondevi cemtion 


</script> ee 
</head> pestleeenge 
你 和 


onautocompletecrror 


</body> 


16.2.3 ”break 和 continue 语句 


@ break 语句 
break 语句 可 以 立即 退出 循环 ， 阻 止 再 次 反复 执行 任何 代码 。 
[ 圆 16.12 js(break).html， 在 循环 执行 的 过 程 中 根据 条 件 退 出 循环 。 


var iNum = 0; 
for (var iCv=]1; iCv<10; iCv++){ 
if (iCv % 5==0){ 

break; 
} 
iNumt++; 
} 
document .write (iNum); 


图 16.1 js(for-in).html 示意 图 


// 输 出 4 视频 讲解 
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在 以 上 代码 中 ，for 循环 从 1 到 10 迭代 变量 iCv。 在 循环 主体 中 ,站 语句 将 检查 iCv 
的 值 是 否 能 被 5 整除 。 如 果 能 被 5 整除 ， 执 行 break 语句 ， 输 出 显示 “4”， 即 退出 循环 前 
执行 循环 的 次 数 。 

四 continue 语句 i 

continue 语句 退出 当前 循环 ， 根 据 控制 表达 式 继续 进行 下 一 次 循环 。 1 时 

圆 16.13 js(continue).html， 在 循环 执行 的 过 程 中 根据 条 件 退 出 当前 国 % 到 
循环 ， 进 行 下 一 次 循环 。 视频 讲解 


var iNum=0; 


for (var iCv=1; iCv<10; iCv++){ 
if (iCv % 5==0){ 
continue; 


} 
iNum++; 
} 
document .write (iNum); // 输 出 8 
输出 显示 “8”， 即 执行 循环 的 次 数 。 可 能 执行 的 循环 总 数 为 9， 不 过 当 iCv 的 值 为 5 
时 将 执行 continue 语句 ， 会 使 循环 跳 过 表达 式 iNum++， 返 回 循环 开头 。 


16.3 WebStorm 和 Chrome 协作 调试 JavaScript 
脚本 程序 


如 果 要 使 用 WebStorm 和 Google Chrome 共同 协作 调试 JavaScript 程序 , 必须 在 Google 
Chrome 安装 JetBrains IDE Support 扩展 程序 , 由 于 这 个 扩展 程序 不 能 直接 在 Google Chrome 
安装 ， 所 以 需要 事先 下 载 ， 可 以 从 插件 网 (http://www.cnplugins.com/devtool/jetbrains-ide- 
support/) 下 载 , 文件 为 “www.cnplugins.com_hmhgeddbohgjknpmjagkdomcpobmllji 2 0 7_.crx”。 

@ 安装 JetBrains IDE Support 扩展 程序 

打开 Google Chrome 浏览 器 ， 在 地 址 栏 中 输入 “chrome:/Wextensions/”， 进 入 Chrome 
扩展 程序 , 将 下 载 的 “www.cnplugins.com_hmhgeddbohgjknpmjagkdomcpobmllji 2 0 7 .crx” 
文件 拖 到 Chrome 扩展 程序 窗口 里 ， 安 装 完成 后 如 图 16.2 所 示 。 

四 使 用 WebStorm 调试 JavaScript 程序 

启动 WebStorm， 打 开 需 要 调试 的 带 有 JavaScript 脚本 程序 的 页 面 ， 单 击 行 序 号 后 面 可 
以 设置 断 点 ， 然 后 在 编辑 区 中 右 击 ， 弹 出 快捷 菜单 ， 选 择 【 调 试 】 命 令 ， 如 图 16.3 所 示 ， 
进入 到 调试 状态 ， 如 果 脚 本 程序 执行 ， 到 设置 的 第 1 个 断 点 处 停 下 来 ， 如 图 16.4 所 示 。 同 
时 Google Chrome 浏览 器 打开 这 个 页 面 ,， 并 显示 ““JetBrains IDE Support ”正在 调试 此 标签 
页 ”消息 ， 用 户 在 调试 期 间 不 要 单 击 【 取 消 】 按 钮 ， 如 图 16.5 所 示 。 

在 WebStorm 编辑 区 中 按 F9 键 ， 程 序 可 以 运行 到 下 一 个 断 点 ， 按 Ctrl+F2 组 合 键 将 停 
止 调试 。 
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址 扩展 程序 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


© 3 © |D chrome://extensions 
应 用 站 haol23 导 航 ，“ 门 | 360 网 址 导航 加 山脉 户外 | 户外 服装 … ”[ 斋 百度 一 下 ， 你 就 知道 国 | 完善 : NTNLS 表 单 新 … 


Chrome 


历史 记录 
| ss 


设 


扩展 程序 


二 360 网 盾 安全 保护 10 加 已 启用 


支持 360 网 盾 的 拦截 车 诈 的 鱼网 站 、 拦 截 木 马 网 站 以 及 网 购 保镖 等 功 。 ”六 FF 自 Chrome 
能 网 上 应 用 店 .。 


详细 信息 
在 隐身 模式 下 启用 区 许 访问 文件 网 址 


上 JB JetBrains IDE Support 207 
HTMUICSS/JavaScript editing and JavaScript debugging using 


JetBrains IDEs 
详细 信息 移 项 
】 在 隐身 模式 下 启用 


戎 。 六 到 更 这 扩展 程序 


图 16.2 Chrome 扩展 程序 窗口 示意 图 


Copy Reference 
46 var iResult = 0; Ms @) 
47 for (iCv = 1; iCv <= 100; icv++){ 从 历史 记录 粘贴 . .，E) 
48 iResult = iResult + iCv; 简单 粘贴 开 ) 
49 } 列 选 择 模式 QM) 
50 document.write("1-100 的 和 是 : " + iResu/?); es _ 
51 </script> i 
52 </head> 
53 “<body> i © ， 
54 </body> 
55 </html> 
56 ER 3 
局 选择 ' js tnhile)_htnl 
© Open in Browser 
本 地 历史 0) 
Update tag with Enmet 
与 前 贴 板 比较 @) 
文件 编码 
Remove BOM 
且 玉兰 站 卫生 国 本 Use JavaSeript Library 
图 create Gist 


图 16.3 ”调试 JavaScript 程序 


对 于 WebStorm 编辑 区 中 代码 的 任何 修改 , Google Chrome 浏览 器 会 自动 实时 同步 ， 不 
需要 再 刷新 。 
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5 exenple - [C:\Documents sad SettingzeVkdainietrsterVyebhzteraprejeetzVeraple] - ...\jsfwhile).htal - Yobstora 11.0.3 此 问 区 | 
文件 了 篇 村 四) 视图 四 时 航 WD 代码 (CC) 重 构 Bi) 运行 四 工具 四 WE 可 全 DO 加 大 肋 四 
户 目 切 # 少 其 辐 国有 入 上 轧 中 二 eatoaazl 效 育 生 3 这 
DD examvle 加 于 phile am 
EE 到 s 国 jsehile Mtal x 


本 要 I htm [head | script 
加 js G8). bem docum ite( "27-10087F1E + “+iResult) 


jr oses) Mo 
加 js rvigster) btn 
var iResu/t=1- 

for (iCv=2iCY =SCv+ $f 
Result=/Result iC 


ee 


国 js enerrar) tm 

@ js onfoess). ha J 

国 someap ht document write( st : "+iResult) 

js emmeaseevar) stnl 

je owee ma Be ee 

em Ioratim) kel MC LC DD 
区 iResult = iResult + iCv, 


js Geript-sre) -ho 
国 je Geleet). hnl } 
@ js Gne). sen document.write("1-100 的 和 是 : "+ iResu/f; 
js Gtyloshoot) wa | </script> 
Bin Guylesheet)l. cs Ahaans 
js Stslesheet)2 ers <body> 
js Gviten). hinl </body> 
ee Yi 
国 is (rca .htm 
rome html 
@ js gzaov) hinl 
B wer ce 

一 外 部 亩 


We | iene 喇 王 并 加 
居民 加 
个 二 了 了 


设 有 此 


广 旧 晤 要 Qn=y Hl 


Ey 


lwety = 0 


ETE | CTT 
国 


9 CR WTO 名 


图 16.4 WebStorm 窗口 示意 图 


while 
€ 3 X [D1localhost:63342/example/js(while).html 安 | 昂 
应 用 站 hse 9S 航 [360 网址 导 航 [山脉 户外 | 户外 服装 .。 [ 国 ] 百度 一 下 ， 你 就 知道 “加 完善 : 1TWLS 表 单 新 … 


“JetBrains IDE Support” 正 在 调试 此 标签 页 。 | 取消 


Paused in debugger | 


正在 等 待 localhest 的 响应 . 


图 16.5 ”Chrome 窗口 示意 图 


16.4 使 用 Sources 调试 JavaScript 和 
脚本 程序 大江 


在 Google Chrome 开发 者 工具 Sources 面板 中 使 用 断 点 来 暂停 JavaScript 代码 , 审查 变 
量 的 值 和 在 特定 时 刻 所 调用 的 堆栈 ， 进 行 调试 。 
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设置 断 点 的 最 基本 方法 是 在 特定 的 代码 行 上 手动 添加 一 个 断 点 。 


行 上 设置 断 点 ， 首 先 打 开 Sources 面板 ， 并 在 左 侧 的 Network 窗 格 中 选择 需 调试 的 页 面 或 


民 各 
四 


在 源 代 码 的 左 侧 可 以 看 到 行 号 ， 单 击 行 号 ， 就 会 在 该 行 代码 上 添加 一 个 断 点 。 如 果 想 
寺 忽 略 一 个 断 点 ， 指 向 断 点 行 号 右 击 ， 在 快捷 菜单 中 选择 Disable breakpoint 命令 
点 ， 指 向 断 点 行 号 右 击 ， 在 快捷 菜单 中 选择 Remove breakpoint 命令 。 当 代码 
执行 时 到 断 点 处 暂停 ， 如 果 继 续 执行 ， 单 击 Resume script execution 按钮 ， 如 图 16.8 所 示 。 

Chrome 开发 者 工具 还 可 以 设置 监测 网 页 元 素 变化 时 的 断 点 (DOM 断 点 )。 在 指定 的 
元 素 上 右 击 ， 在 快捷 菜单 中 选择 【审查 检查 】 命 令 ， 将 这 个 元 素 节 
在 快捷 菜单 中 选择 Break on|Subtree Modifications 命令 ， 


临时 


想 删 除 一 个 断 


后 右 击 突出 显示 的 这 个 元 素 节点 ， 


Show navigator 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


i ~ > 人 
脚本 文件 用 鼠标 单 击 , 如 图 16.6 所 示 。 如 果 用 户 找 不 到 Network 窗 格 , 单 击 Show navigator 
按钮 ， 如 图 16.7 所 示 。 
RU i Covale” onoey. Neb | Re Dn” Mpc ery, Mi 
Network | | | gamentm x 加 na:++@o 
vOtp 1 ml> 2 watch 
vO a vase 
v Ba E/E6%95%9P6ESIDK%I/%) 4 <meta charset="UTF-8"> Not poused 
S| titlevgare /title 
| hens pe 
下 stooy 
cform id--euessy Not paused 
”jid="select1”class="select” name="select™ wi ™ Breakpoints 
Ha Breakpoints 
| » DOM Breakpoints 
Global Listeners 
> Event Listener Breakpoints 
到 Script 
22 document .getElementById("reset").style.visibility="hidden"; 
3 Mechs ER sb t gess ) -saledtvfalse5 
24 . 
和 
25 Besscount-10; 
27 essvince; 
er es 上 
29| Jr Secsscount gocment oucrvselectort secsscount) 
到 |， i 
| » | {} Line31, Column 23 
Console History 
© top Y | Fikter Defauk levels Y tems hidden by fiter 
> 


图 16.6 Chrome 开发 者 工具 示意 图 


Elements Console Sources Network Performance Memory Application ”Security Audits 日 
nm++|i@0 
> Watch 
Cir+p Openfie v Call Stack 

Ctd+Shift+P Run command Notpaused 

Dropin a folder to add to workspace 1 
Nat paused 

™ Breakpoints 


图 16.7 单 击 Show navigator 按钮 


在 元 素 节 点 左 侧 出 现 了 蓝 色 图 标 ， 表 示 这 个 节点 设置 了 DOM 断 点 ， 如 图 16.9 所 示 。 
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如 果 要 在 特定 的 代码 


点 突出 显示 为 蓝 色 ， 然 


第 16 章 算法 和 ECMAScript 语句 


637px x 925px 


Paused in debugger I> AY 


Elements 。 Console 


BR 是 


Network Filesystem 为 
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图 16.9 设置 DOM 断 点 


当 这 个 元 素 节 点 发 生变 化 时 页 面 暂 停 ， 转 到 Sources 面板 突 


出 显示 脚本 中 导致 这 个 元 


素 节 点 发 生 更 改 的 代码 行 。 单 击 Resume script execution 按钮 ， 恢 复 脚本 的 执行 。 
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16.5 小结 


本 章 简要 介绍 了 算法 、 程 序 和 语句 的 基本 概念 及 相互 关系 ， 详 细 介 绍 了 ECMAScript 条 
件 和 循环 语句 , 并 介绍 了 使 用 WebStorm 和 Google Chrome 调试 JavaScript 脚本 程序 的 方法 
和 步骤 。 


16.6 习题 


@ 选择 题 
(1) 作为 寺 语 句 ， 下 面 ( ) 是 正确 的 。 

A. if(x=2) B. 人 人 else . if(x=—2&&){} 
(2) 下 列 关于 循环 语句 的 描述 中 ) 是 错误 的 。 


A. 循环 体内 可 以 包含 ra 句 
B. 循环 体内 必须 同时 出 现 break 和 continue 语句 
C. 循环 体内 可 以 出 现 站 语句 
D. 循环 体 可 以 是 空 语句 
《33 JavaScript 循环 语句 中 ) 是 正确 的 。 
. if(i<10;i++) B. for(i=0:1<10) 
for i=] to 10 D. for(i=0:1<=10:i++) 
(4) 下 面 语句 中 要 使 while 循环 体 执行 10 次 ， 在 空白 处 应 填写 ( 站 


Var iCv=0; 


while( yt 

iCv+=2;} 

A. iCv<10 B. iCv<=10 C. 1Cv<20 D. iCv<=20 
(5) 循环 语句 for(var i=0:i=1:it+) {的 循环 次 数 是 (。。)。 

A. 0 B11 C22 D. 无 限 
四 简 答题 


(1) ECMAScript 条 件 语 句 有 哪些 ? 区 别 是 什么 ? 
(2) ECMAScript 循环 语句 有 哪些 ? 区 别 是 什么 ? 
(3) 编写 程序 ， 计 算 1!+2!+3!+…+101。 

(4) 在 页 面 上 输出 如 下 数字 图 案 。 


1 

hb 
I 
Be 
he 
(5) 求 三 位 数 ， 被 4 除 余 2， 被 7 除 余 3， 被 9 除 余 5。 
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JavaScript 是 基于 对 象 的 语言 ， 但 同时 也 可 以 创建 对 象 ， 所 以 也 是 面向 对 象 的 语言 。 
JavaScript 支持 事件 驱动 ， 完 成 行为 操作 。 本 章 首先 介绍 JavaScript 行为 的 构成 ， 包 括 
ECMAScript 函数 和 HTML 事件 ， 接 下 来 讨论 ECMAScript 引用 类 型 对 象 ，ECMAScript 如 
何 进行 错误 处 理 ， 最 后 详细 介绍 ECMAScript 内 置 对 象 和 本 地 对 象 。 

本 章 要 点 : 

< 如 ECMAScript 函数 。 


< 妨 HIML 事件 。 

如 ECMAScript 对 象 概 述 。 

< 信 ECMAScript 错误 处 理 。 

如 ECMAScript 内 置 对 象 和 本 地 对 象 。 


17.1 行为 


行为 是 某 个 事件 和 由 该 事件 触发 的 动作 的 组 合 。 实际 上 , 事件 是 HTML 元 素 的 事件 属 
性 ， 通 过 浏览 器 生成 消息 ， 指 示 该 页 的 访问 者 对 某 个 元 素 已 执行 了 某 种 操作 ， 例 如 当 访 问 
者 将 鼠标 指针 移 到 某 个 超 链接 上 时 ， 浏 览 器 将 为 该 链接 生成 一 个 onMouseOver 事件 ， 然 后 
浏览 器 检查 是 否 应 该 执行 动作 进行 响应 操作 ， 动 作 是 预先 编写 的 JavaScript 函数 〈 一 段 
程序 )。 


17.1.1 ECMAScript 函数 
@ 函数 的 定义 


函数 是 一 组 可 以 根据 需要 随时 运行 的 语句 ， 函 数 是 ECMAScript 的 核心 。 在 函数 定义 
中 包括 关键 字 fonction、 函 数 名 、 一 组 形 参 和 执行 的 代码 块 。 函 数 的 基本 语法 如 下 : 
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function functionName (parameter0,parameterl, ,parameterN){ 
statements 
} 


例如 : 


function fnsay(sName,sMessage){ 
alert ("你 好 " + sName + sMessage); 
} 


其 中 ，parameter0，parameterl ，…，PparameterN 是 形式 参数 。 

提示 : 形 参 其 实 就 是 变量 , 具体 值 还 不 知道 , 需要 调用 函数 时 传递 的 实际 参数 才能 确定 。 

人 @ 男 数 的 调用 

函数 必须 通过 名 字 加 上 括号 中 的 实际 参数 进行 调用 才能 执行 或 者 通过 响应 事件 运行 。 
调用 形式 如 下 : 

functionName (argument0,argumentl1,**,argumentN); 
其 中 ，argument0，argument1，…，argumentN 是 实 参 ,在 调用 函数 时 为 形 参 传递 的 实际 值 。 

如 果 想 调用 fnSay0 函 数 ， 可 以 使 用 如 下 的 代码 : 

fnSay(" 张 三 ", "欢迎 你 !") ; 

fnSay0 函 数 会 生成 一 个 警告 消息 框 ， 显 示 信 息 “ 你 好 张 三 欢 迎 你 1”。 

当 使 用 多 个 参数 时 ， 函 数 调用 的 各 个 实 参 按照 其 排列 的 先后 顺序 依次 传递 给 函数 定义 
中 的 形 参 。 

四 本 数 的 返回 值 

如 果 函 数 需要 返回 值 ， 不 必 明 确 地 声明 它 ， 直 接 在 retum 语句 后 面 将 返回 值 返回 。 
例如 : 


function fnsum(iNuml, iNum2){ 
return iNuml + iNum2; 
} 


下 面 的 代码 把 和 SumO 函 数 返回 的 值 进行 输出 : 

fnsum(1,1); // 输 出 2 

函数 在 执行 retum 语句 后 立即 停止 运行 ，retum 语句 后 的 代码 都 不 会 被 执行 。 如 果 函 
数 没有 返回 值 或 调用 了 没有 参数 的 return 语句 ， 那 么 返回 值 是 undefined。 

和 @ 了 秀 数 的 泣 套 

如 果 在 一 个 函数 定义 的 函数 体 语句 中 出 现 了 对 另 一 个 函数 的 调用 ， 称 
为 函数 嵌 套 调用 。 当 一 个 函数 调用 另 一 个 函数 时 ， 应 该 在 定义 调用 函数 之 
前 先 定义 被 调用 函数 。 

[ 贺 1741 js(Function nesting).html, 求 1+(1+2)+(1+2+3)+*…+(1+2+*…+n) 
的 和 。 


视频 讲解 
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首先 定义 一 个 求 1+2+…+n 和 的 函数 fnSum(iNum)。 


// 求 1+2+…+n 
function fnSum(iNum) { 
Var iSum=0, iCv; 
for (iCv=1; iCv<=iNum; iCv++) { 
isum+=iCv; 
return iSum; 
: 


然后 定义 求 整个 和 的 函数 和 AlliNum)， 在 函数 fAlliNum) 中 调用 函数 fnSum(iNum)。 


// 求 1+(1+2)+(1+2+3)+…+(1+2+…+Dn) 
function fnAll(iNum) { 

Var iSsum=0, iCv; 

for (iCv=1l; iCv<=iNum; iCv++) { 


isum+=fnSum(iCv); 
} 
return iSum; 
} 
如 果 在 一 个 函数 定义 的 函数 体 中 出 现 了 对 自身 函数 的 直接 (或 间接 ) 调用 ， 称 为 递归 
在 实现 递归 的 函数 中 必须 满足 以 下 两 点 : 一 是 要 有 测试 是 否 继续 递归 调用 的 条 件 ， 保 
证 递归 不 能 被 无 限 执行 ， 二 是 要 有 递归 调用 的 语句 ， 保 证 递归 必须 被 执行 。 
贺 17.2 js(recursive function).html， 在 下 面 求 nl 的 阶乘 例子 中 ， 阶 乘 函 数 
fnFactorial(iNum) 自 己 调用 自己 ,满足 了 以 上 两 点 条 件 ， 完 成 了 递归 。 
// 求 n! 的 阶乘 
function fnFactorial (iNum) { 


var iResult; 
if (iNum<=1) 


iResult=1; // 不 再 递归 
else 
iResult=iNum * fnFactorial(iNum - 1); // 递 归 调用 
return iResult; 
} 
全 变量 的 作用 域 


变量 的 作用 域 是 指 变量 起 作用 的 范围 。 在 ECMAScript 中 变量 的 作用 域 分 为 全 局 作用 
域 和 函数 作用 域 ， 定 义 在 任何 函数 外 部 的 变量 是 全 局 作用 域 变 量 ， 在 函数 内 部 不 使 用 var 
关键 字 定 义 的 变量 也 是 全 局 作用 域 变量 ， 在 函数 内 部 使 用 var 关键 字 定 义 的 变量 才 是 函数 
作用 域 变量 ， 函 数 作用 域 变量 会 覆盖 同名 的 全 局 作用 域 变 量 。 全 局 作用 域 变量 的 可 见 区 域 
是 整个 脚本 〈 除 了 被 同名 函数 作用 域 变量 覆盖 的 区 域 ), 函数 作用 域 变量 的 可 见 区 域 是 函数 
内 部 《除了 被 内 部 堪 套 函数 中 同名 函数 作用 域 变量 覆盖 的 区 域 )。 

一 般 来 说 ， 在 函数 内 部 尽量 使 用 函数 作用 域 变量 ， 不 使 用 全 局 作用 域 变量 。 为 了 避免 
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混淆 ， 全 局 作用 域 变量 和 函数 作用 域 变量 最 好 不 要 同名 。 

[ 圆 17.3 js(scope)html,， 在 该 例 中 SName 既是 全 局 作用 域 变 量 ， 又 是 
函数 作用 域 变量 ， 各 自 独 立 存 在 于 自己 的 作用 域 中 。 


Var sName="Microsoft"; 


function fnA(){ 


视频 讲解 


Var sName="Google"; 
return sName; 
二 
document .write (fnA()); // 输 出 "Google" 


document .write (sName); // 输 出 "Microsoft" 


17.1.2 ”ECMAScript 闭 包 


闭 包 指 的 是 在 函数 内 可 以 使 用 不 需要 被 计算 的 变量 ， 也 就 是 说 ， 函 数 可 以 直接 使 用 在 
此 函数 之 外 定义 的 变量 。 闭 包 就 是 能 访问 另 一 个 函数 作用 域 中 变量 的 函数 
圆 17.4 js(Closurel) html， 该 例 首先 定义 全 局 变量 sStr， 然 后 在 fsay0 函 数 内 直接 
使 用 这 个 变量 。 
Var SStr=" 你 好 "7 
function fnsay() { 
alert (sstr); 


} 
fnsay(); 


在 上 面 这 段 代码 中 ， 脚 本 被 载 入 内 存 后 并 没有 为 函数 fnSay0 计 算 变 量 sStr 的 值 。 
在 一 个 函数 中 定义 一 个 闭 包 函 数 会 使 闭 包 变 得 更 加 复杂 。 
圆 17.5 js(Closure2).html， 该 例 在 函数 AddNum() 内 部 定义 了 一 个 函数 phpDoAdd0)。 


var iNum=10; 

function fnAddNum(iNum]l,iNum2){ 
function fnDoAdd(){ 

return iNuml + iNum2 + iNum; 

} 
return fnDoAdd(); 

} 

document .write (fnAddNum (20, 30)); // 输 出 60 视频 讲解 


函数 AddNum() 定 义 的 内 部 函数 DoAdd0 是 一 个 闭 包 ， 因为 它 需 要 获取 外 部 函数 的 
参数 iNuml 和 iNum2 以 及 全 局 变量 iNum 的 值 。 闭 包 最 重要 的 概念 是 DoAdd0) 函 数 根本 
没 接收 参数 ， 它 使 用 的 变量 值 是 从 执行 环境 中 获取 的 。 

在 ECMAScript 中 闭 包 非 常 强大 ， 可 用 于 执行 复杂 的 计算 。 
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17.1.3 ” HTML 事件 


事件 是 可 以 被 JavaScript 侦 测 到 的 某 种 操作 ,页 面 中 的 每 个 元 素 都 可 以 产生 某 些 事 件 ， 
事件 可 以 触发 调用 JavaScript 函数 来 完成 某 种 功能 。 例 如 可 以 在 用 户 单 击 按钮 时 产生 一 个 
onclick 事件 来 触发 某 个 函数 。 
事件 通常 与 函数 配合 使 用 ， 当 事件 发 生 时 函数 才 会 执行 。 

项 17.6 js(onclick)html ， 该 例 中 的 alert0 语 句 被 写 入 函数 
fnDisplayMessage(),， 那么 当 用 户 单 击 按钮 时 , 通过 按钮 的 onclick 事件 函数 
才 会 执行 。 当 页 面 载 入 时 ,通过 window.onload 事件 定义 id="btn" 按 钮 的 单 


击 事件 行为 ,“document.getElementById("btn")” 是 获得 按钮 对 象 。 视频 讲解 
源 代码 如 下 : 
<head> 
<title>onclick 事件 </title> 
<script> 


window.onload=function(){ 
document .getElementById ("btn") .onclick=function(){ 
displaymessage(); 
| 
} 
function displaymessage() { 
alert ("你 好 ! "); 
} 
</script> 
</head> 
<body> 
<input type="button" value=" 单 击 我 " name="btn" id="btn"> 
</body> 


事件 在 HTML 页 面 中 定义 ， 表 17.1 列 出 了 HTML 事件 的 属性 。 
表 17.1 HTML 事件 的 属性 


属 性 当 以 下 情况 发 生 时 出 现 此 事件 属 性 当 以 下 情况 发 生 时 出 现 此 事件 
onabort 图 像 加 载 被 中 断 onmousedown 鼠标 按键 被 按 下 
onblur 元 素 失 去 焦点 onmousemove 鼠标 被 移动 
onchange 改变 域 的 内 容 onmouseonut 鼠标 从 元 素 移 开 
onclick 鼠标 单 击 某 个 对 象 onmouseover 鼠标 被 移 到 元 素 之 上 
ondblclick 鼠标 双击 某 个 对 象 onmouseup 鼠标 按键 被 松 开 
Onerror 加 载 文档 或 图 像 时 发 生 错误 onreset 重 置 按钮 被 单 击 
onfocus 元 素 获得 焦点 Onresize 窗口 或 框架 被 调整 尺寸 
onkeydown 键盘 的 键 被 按 下 onselect 文本 被 选 定 
onkeypress 键盘 的 键 被 按 下 或 按 住 onsubmit 提交 按钮 被 单 击 
onkeyup 键盘 的 键 被 松 开 onbeforeunload | 用 户 退 出 页 面 之 前 
onload 页 面 或 图 像 被 完成 加 载 onunload 用 户 退 出 页 面 
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HTML 事件 触发 浏览 器 中 的 动作 ， 然 后 启动 函数 来 响应 这 个 事件 ， 执 行 特定 的 功能 ， 
完成 一 个 行为 。 一 个 完整 的 行为 是 这 样 定义 的 : 
对 象 或 元 素 .事件 -函数 


@ onload、onbeforeunload 和 onresize 


当 用 户 进 入 或 离开 页 面 时 会 触发 onload 和 onbeforeunload 事件 ， 调 整 窗口 或 框架 大 小 
时 会 触发 onresize 事件 。 

onload 事件 常用 来 在 页 面 加 载 到 窗口 时 定义 元 素 的 行为 ， 整 个 页 面 在 浏览 器 显示 时 被 
视 为 窗口 对 象 。 


[ 夯 ]17.7 js(onload).html， 该 例 说 明了 3 个 事件 ,注意 onbeforeunload 和 onresize 两 个 
事件 及 行为 是 在 onload 事件 里 定义 的 。 

源 代码 如 下 : 

<head> 

<title>onload、onbeforeunload 和 onresize 事件 </title> 


<script> 
window.onload=function(){ 
aLert(" 次 迎 ! ww)s 
window.onbeforeunload=function(){ 
alert ("再 见 ! "); 
} 
window.onresize=function(){ 
alert ("你 调整 了 窗口 的 大 小 ! "); 
} 
} 

</script> 

</head> 

<body> 

</body> 

@ onfocus、onblur 和 onchange 

onfocus 是 元 素 获得 焦点 时 被 触发 的 事件 ，onblur 是 元 素 失去 焦点 时 被 触发 的 事件 ， 
onchange 是 当 用 户 改 变 域 的 内 容 时 被 触发 的 事件 。 

[ 圆 17.8 js(onfocus).html， 其 中 的 表单 元 素 有 3 个 文本 框 ， 当 id="name" 文 本 框 失去 
焦点 时 弹出 消息 框 显示 输入 的 姓名 ， 当 id="age" 文 本 框 的 值 改变 时 弹出 警告 框 进行 提示 ， 
当 id="address" 文 本 框 获得 焦点 时 文本 框 的 背景 色 变 为 红色 , 失去 焦点 时 文本 框 的 背景 色 又 
变 为 白色 。 

源 代码 如 下 : 

<head> 

<title>onfocus、onblur 和 onchange 事件 </title> 

<script> 


window.onload=function(){ 


document .getElementById ("name") .focus (); 
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document .getElementById ("name") .onblur=function(){ 
alert ("姓名 : "+document. getElementById ("name") .value); 
} 
document .getElementById ("age") .onchange=function(){ 
alert ("你 修改 了 年 龄 ! ") ; 
1 
document .getElementById ("address") .onfocus=function (){ 
document .getElementById("address") .style.backgroundColor="#FF0000"; 
} 
document .getElementById ("address") .onblur=function(){ 
document .getElementById ("address") .style.backgroundColor="#FFFFFF"; 
} 
} 
</script> 
</head> 
<body> 
<form id="forml" method="post" action=""> 
<label for="name"> 姓 名 </label> 
<input type="text" name="name" id="name" /><br /> 
<label for="age"> 年 龄 </label> 
<input name="age" type="text" id="age" value="18" /><br /> 
<label for="address"> 地 址 </label> 
<input type="text" name="address" id="address" /><br /> 
<input type="submit" name="btn" id="btn" value=" 提 交 " /> 
</form> 
</body> 


@ onmouseover 和 onmouseout 

onmouseover 是 鼠标 移 到 元 素 之 上 时 被 触发 的 事件 ，onmouseout 是 鼠标 从 元 素 移 开 时 
被 触发 的 事件 。 

辆 179 js(onmouseover).html， 当 <a> 元 素 的 onmouseover 事件 被 触发 时 会 改变 元 素 
显示 的 内 容 ， 当 onmouseout 事件 被 触发 时 又 恢复 原 内 容 。 

源 代码 如 下 : 


<head> 
<title>onmouseover 和 onmouseout 事件 </title> 
<ScripE> 
window.onload=function(){ 
document .getElementById("tsinghua") .onmouseover=function(){ 
document .getElementById("tsinghua") .innerHTML="http://www.tsinghua. 
edu.cn/™; 
} 
document .getElementById("tsinghua") .onmouseout=function(){ 


a, 


document .getElementById ("tsinghua") .innerHTML=" 清 华 大 学 "; 
} 
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» 
</script> 
</head> 
<body> 
<a href="http://www.tsinghua.edu.cn/”id=" tsinghua"> 清 华 大 学 </a> 
</body> 


四 onerror 

onerror 事件 会 在 文档 或 图 像 加 载 过 程 中 发 生 错 误 时 被 触发 。 支 持 该 事件 的 HTML 标 
签 有 <img>、<object> 和 <style>， 支 持 该 事件 的 JavaScript 对 象 有 window 和 image。 

例如 通过 该 方法 可 以 使 得 当前 图 片 载 入 失败 时 显示 默认 图 片 。 


<img src="test.jpg" onerror="fnImage (this)" /> 
function fnImage (oImage){ 
oImage.src="images/about .gif"; 
oImage.onerror=null; 
} 


当 图 片 testjpg 不 在 时 触发 onerror 事件 ， 调 用 fnImage(this) 函 数 ， 用 默认 图 片 
images/about.g 这 和 蔡 代 。 

另外 ， 如 果 页 面 中 出 现 脚本 错误 ， 也 会 产生 onerror 事件 ， 可 以 用 来 协助 处 理 页 面 中 的 
JavaScript 错误 。 利 用 onerror 事件 进行 错误 处 理 必须 创建 一 个 处 理 错误 的 函数 , 称 为 onerror 
事件 处 理 器 ， 事 件 处 理 器 允许 使 用 onerror 事件 的 3 个 参数 ， 即 msg (错误 消息 )、url (发 
生 错 误 的 页 面 的 url) 和 line (发 生 错 误 的 代码 行 )。 其 语法 如 下 : 


window.onerror=handleErr; 


function handleErr (msg,url,line){ 


// 错 误 处 理 代码 
return true or false; 
} 
在 正 浏览 器 中 返回 值 决定 是 否 在 浏览 器 上 显示 标准 的 
错误 信息 。 如 果 返 回 false， 浏 览 器 显示 错误 信息 ， 如 果 返 。 | 守 人 t ， 
回 true， 浏 览 器 不 显示 错误 信息 ， 显 示 的 错误 信息 在 状态 。 | 各 esreae 
栏 中 进行 提示 。 党 
[ 贺 17.10 js(onerror).html， 说 明了 如 何 使 用 onerror 


事件 来 捕获 JavaScript 的 错误 。 例 中 由 于 “addlert(" 欢 迎 !")” 
方法 不 存在 , 在 脚本 执行 时 会 捕获 到 错误 , 如 图 17.1 所 示 。 ”图 17.1 js(onerror).html 示意 图 
源 代码 如 下 : 
<head> 


<title>onerror 事件 </title> 
<script> 
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window.onerror=handleErr; 

function handleErr (msg,url,line){ 
var sTxt=""; 
sTxt=" 这 个 页 面 有 一 个 错误 ! \n"; 
sTxt+=" 错 误 是 :" + msg + "\n"; 
STxt+="URL:" + decodeURI (url) + "\n"; 
sTxt+=" 行 :" + line + "\n"™; 
sTxt+=" 单 击 确定 继续 \n"; 
alert (sTxt); 
return true; 


} 

addlert ("欢迎 ! ") ; ”// 这 个 语句 不 存在 
</script> 

</head> 

<body> 

</body> 


17.2 ECMAScript 对 象 


17.2.1 对象 和 类 


@ 对 象 

ECMA-262 把 对 象 (object) 定义 为 “属性 的 无 序 集合 ， 每 个 属性 存放 一 个 原始 值 、 对 
象 或 函数 ”。 这 意味 着 对 象 是 无 特定 顺序 的 值 的 数组 。 

四 类 

每 个 对 象 都 由 类 定义 ， 可 以 把 类 看 作对 象 的 “配方 ”， 类 不 仅 要 定义 对 象 的 接口 〈 属 
性 和 方法 )， 还 要 定义 对 象 的 内 部 工作 《使 属性 和 方法 发 挥 作用 的 代码 )。ECMAScript 并 
没有 类 的 概念 ， 但 对 象 本 身 可 以 用 来 创建 新 对 象 ， 而 对 象 也 可 以 继承 其 他 对 象 。 

© 实例 

在 使 用 类 创建 对 象 时 ， 生 成 的 对 象 叫 作 类 的 实例 〈instance)， 由 类 创建 对 象 实例 的 过 
程 叫 作 实例 化 (instantiation)。 在 ECMAScript 中 , 任何 一 个 函数 都 可 以 被 实例 化 一 个 对 象 。 

@@ 对 象 的 构成 

在 ECMAScript 中 ， 对 象 是 属性 的 无 序 集合 ， 属 性 可 以 是 基本 数据 类 型 ， 也 可 以 是 引 
用 类 型 。 如 果 属 性 存放 的 是 函数 ， 它 将 被 看 作对 象 的 方法 (method)， 和 否则 被 看 作对 象 的 属 
性 (property)。 

1) 属性 

属性 指 与 对 象 有 关 的 值 。 

在 下 面 的 例子 中 ， 使 用 字符 串 对 象 的 长 度 属 性 来 计算 字符 串 中 的 字符 数目 。 

Var sTxt="Hello World!™"; 

sTxt .length; // 输 出 12 
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2) 方法 

方法 指 对 象 可 以 执行 的 操作 。 

在 下 面 的 例子 中 ， 使 用 字符 串 对 象 的 ttUpperCase() 方 法 来 显示 大 写字 母 。 


Var sStr="Hello world!" 
sStr.toUpperCase () ; // 输 出 "HELLO WORLD!" 


全 作用 域 
作用 域 指 的 是 变量 的 适用 范围 。ECMAScript 中 对 和 象 的 所 有 属性 和 方法 都 是 公用 的 。 


17.2.2 ”创建 和 使 用 对 象 


@ 创建 类 
在 现代 JavaScript 中 ， 一 般 通 过 构造 函数 的 形式 来 创建 类 。 例 如 : 


function Person (name){ 


this.name=name; 
this.greeting=function(){ 
return ' 嗨 ,你 好 ! 我 是 '+this.name+'。'; 
]7 

} 

这 个 构造 函数 是 JavaScript 版 本 的 类 ， 它 定义 了 Person 类 的 属性 和 方法 。 

这 里 使 用 了 this 关键 字 ， 在 ECMAScript 中 ， 关 键 字 this 常用 在 构造 函数 中 ， 关 键 字 
this 指向 了 当前 代码 运行 时 的 对 象 ， 即 无 论 是 该 对 象 的 哪个 实例 被 这 个 构造 函数 创建 ， 它 
的 name 属性 就 是 传递 到 构造 函数 形 参 name 的 值 。 

提示 : 一 个 构造 函数 通常 是 以 大 写字 母 开 头 ， 这 样 便于 区 分 构造 函数 和 普通 函数 。 

四 声明 和 实例 化 

对 象 的 声明 是 关键 字 new 后 面 跟 上 实例 化 的 类 的 名 字 。 例 如 : 

var oPerson=new Person(' 张 三 '); 

这 行 代码 创建 了 Person 类 的 一 个 实例 ， 并 把 它 存 储 到 变量 oPerson 中 ， 这 样 就 可 以 像 
对 象 一 样 访问 它 的 属性 和 方法 了 。 例 如 : 

OPerson .name 


oPerson['name'] 


oPerson.greeting() 

全 创建 对 象 实例 的 其 他 方式 

1) ObjectO 构 造 函 数 

户 可 以 使 用 ObjectO 构 造 函数 来 创建 一 个 新 对 象 。 例 如 : 


Var oPerson=new Object () 7 


这 样 oPerson 变量 中 存储 了 一 个 空 对 象 ， 然 后 根据 需要 ， 使 用 点 或 括号 表示 法 向 此 对 
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象 添加 属性 和 方法 。 例 如 : 


OPerson .name=' 7 
oPerson.greeting=function(){ 

return ' 嗨 ， 你 好 ! 我 是 '+this.name+'。 
} 


2) 使 用 create() 方 法 
JavaScript 有 个 内 嵌 的 方法 create(), 它 允 许 基于 现 有 对 和 象 创建 新 的 对 象 实例 。 例 如 : 


Var oPersonl=Object.create (oPerson); 


oPersonl 是 基于 oPerson 创建 的 ， 它 们 具有 相同 的 属性 和 方法 。 这 样 做 无 须 定义 构造 
函数 就 可 以 创建 新 的 对 象 实例 。 

人 @ 出 除 对 象 

ECMAScript 拥有 无 用 存储 单元 收集 程序 (garbage collection routine), 也 就 是 说 用 户 不 
必 专 门 删除 对 象 来 释放 内 存 。 

把 对 象 变量 的 值 设置 为 null， 可 以 强制 性 地 删除 对 象 。 例 如 : 


oPerson=null; 


当 将 变量 oPerson 设置 为 null 后 ，oPerson 对 象 就 不 存在 了 ， 该 对 象 将 被 删除 。 
每 用 完 一 个 对 象 后 就 将 其 删除 ， 从 而 释放 内 存 ， 这 是 个 好 习惯 。 


17.2.3 ECMAScript 引用 类 型 


在 ECMAScript 中 变量 可 以 存放 两 种 类 型 的 值 ， 即 原始 类 型 值 和 引用 类 型 值 。 原 始 类 
型 值 直接 存储 变量 访问 的 位 置 ， 引 用 类 型 值 存储 的 是 一 个 指针 〈point)， 指 向 存储 对 象 的 
内 存 。 

引用 类 型 通常 叫 作 类 ， 也 就 是 说 ， 引 用 类 型 所 处 理 的 是 对 象 。 

@ Object 对 象 

ECMAScript 中 的 所 有 对 象 都 由 Object 对 象 继承 而 来 ，Object 对 象 中 的 所 有 属性 和 方 
法 都 会 出 现在 其 他 对 象 中 。 

1) Object 对 象 的 属性 

(1) constructor 属性 : 返回 对 创建 此 对 象 的 数组 函数 的 引用 ，constructor 属性 始终 指 
向 创建 当前 对 象 的 构造 函数 。 例 如 : 


Var test=new Array() 7 


test .constructor==Array; // 输 出 true 


(2) prototype 属性 : 返回 对 象 类 型 原型 的 引用 。 

JavaScript 被 称 为 基于 原型 的 语言 ,每 个 对 象 都 拥有 一 个 原型 对 象 , 对 象 以 原型 为 模板 ， 
继承 方法 和 属性 ， 原 型 对 象 也 可 能 拥有 原型 ， 从 中 继承 方法 和 属性 ， 一 层 一 层 ， 依 此 类 推 ， 
这 种 关系 常 被 称 为 原型 链 。 这 样 可 以 解释 为 何 一 个 对 象 会 拥有 定义 在 其 他 对 和 象 中 的 属性 和 
施法 。 
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准确 地 说 , 这 些 属性 和 方法 定义 在 Object 对 象 的 prototype 属性 上 , 而 国 
非 对 象 实例 本 身 。 原 型 最 简单 的 用 法 是 动态 扩展 类 的 方法 和 属性 。 

圆 17.1 js(oPerson) html， 在 该 例 中 创建 Person 类 并 扩充 Person 类 
的 方法 。 

源 代码 如 下 : 视频 讲解 

// 创 建 Person 类 


function Person (name){ 


this .name=name7 
this.greeting=function(){ 

return ' 嗨 ,你 好 ! 我 是 '+this.name+'。'; 
] 7 


} 

// 基 于 Person 类 创建 实例 对 象 oPerson 
Var oPerson=new Person(' 张 三 '); 
// 为 Person 类 扩建 方法 bye () 
Person.prototype.bye=function() { 


return ' 我 是 '+this .name+' 跟 大 家 拜 苦 了 ! '; 


} 

// 实 例 对 象 oPerson 使 用 Person 类 方法 bye () 输出 “我 是 张 三 跟 大 家 拜拜 了 !” 

oPerson.bye(); 

2) Object 对 象 的 常用 方法 

(1) hasOwnProperty(property) 方 法 : 判断 对 象 是 否 有 某 个 特定 的 属性 ， 必 须 用 字符 串 
指定 该 属性 。 例 如 : 


oPerson.hasOwnProperty ("name"); // 输 出 true 


(2) isPrototypeOf(object) 方 法 : 判断 该 对 象 是 否 为 男 一 个 对 象 的 原型 ， 该 方法 可 以 用 
于 确定 对 象 的 类 。 例 如 : 


Var o=new Object (); 

Object.prototype.isPrototypeof (o) 7 // 输 出 true 
Array.prototype.isPrototypeof (o) ; // 输 出 false 
Object.prototype.isPrototypeof (Array.prototype);  // 输 出 true 


(3) toString0 方 法 : 返回 对 象 的 字符 串 表 示 。 

(4) valueOf0 方 法 : 返回 的 是 与 对 象 相关 的 原始 值 ( 如 果 这 样 的 值 存在 )。 对 于 类 型 为 
Object 的 对 象 来 说 ， 由 于 它们 没有 原始 值 ， 所 以 该 方法 返回 的 是 这 些 对 象 自身 。 例 如 : 

iNum=1; 

sStr="1™"; 

bBoo=true; 

function fnFun(){}; 

aArr=new Array(l1,2); 

oob]j=new Object (); 


iNum.valueof (); // 输 出 1 


| 340 


第 17 章 行为 与 对 象 1 7 


sstr.valueof (); // 输 出 "1" 
bBoo.valueof (); // 输 出 true 
fnFun.valueof (); // 返 回 函数 本 身 
aArr.valueOf (); // 输 出 数组 
oobj .valueof (); // 返 回 对 象 自身 


四 Boolean 对 象 
Boolean 对 象 表示 两 个 值 ， 即 tue 和 false。 创 建 Boolean 对 象 的 语法 如 下 : 


var oBooleanObject=new Boolean (value); // 实 例 化 

var oBooleanObject=Boolean (value); // 转 换 函 数 

当 带 有 运算 符 new 时 ，Boolean() 将 把 它 的 参数 转换 成 一 个 布尔 值 ， 并 且 返 回 一 个 包含 
该 值 的 Boolean 对 象 。 如 果 作 为 一 个 函数 调用 ，Boolean0 只 把 它 的 参数 转换 成 一 个 基本 数 
据 类 型 的 布尔 值 。 

如 果 省 略 value 参数 ， 或 者 设置 为 0、null、""、false、undefined 或 NaN， 则 该 对 象 设 
置 为 false， 否则 设置 为 tue〈 即 使 value 参数 是 字符 串 "false")。 

在 ECMAScript 中 很 少 使 用 Boolean 对 象 。 

全 Number 对 象 

Number 对 象 是 基本 数据 类 型 数值 的 包装 对 象 。 创 建 Number 对 象 的 语法 如 下 : 


Var oNum=new Number (value); 


Var oNum=Number (value); 

当 Number0 和 运算 符 new 一 起 使 用 时 ， 它 返回 一 个 新 创建 的 Number 对 象 。 如 果 不 用 
new 运算 符 ， 把 Number() 作 为 一 个 函数 来 调用 ， 它 将 把 自己 的 参数 转换 成 一 个 基本 数据 类 
型 的 数值 ， 并 且 返 回 这 个 值 (如果 转换 失败 ， 则 返回 NaN)。 虽 然 Number 对 象 很 重要 ， 但 
用 户 应 该 少 用 这 种 对 象 ， 以 避免 产生 潜在 的 问题 。 

1) Number 对 象 的 属性 

表 17.2 列 出 了 Number 对 象 的 常用 属性 。 

表 17.2 ”Number 对 象 的 常用 属性 


属 性 描述 
MAX VALUE 表示 的 最 大 数 
MIN VALUE 表示 的 最 小 数 
NaN 非 数字 值 


负 无 穷 大 ， 溢 出 时 返 
正 无 穷 大 ， 滋 出 时 返回 该 


NEGATIVE INFINITY 
POSITIVE INFINITY 


RS 
这 | 辽 


2) Number 对 象 的 方法 

表 17.3 列 出 了 Number 对象 的 常用 方法 。 

toFixed() 方 法 可 以 把 Number 四 售 五 入 为 指定 小 数位 数 的 数字 。 例 如 : 
Var oNum=new Number (13.37) 7 

oNum.toFixed (1); // 输 出 13.4 
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表 17.3 Number 对 象 的 常用 方法 
方 法 描述 
toLocaleString | 把 数字 转换 为 字符 串 ， 使 用 本 地 数字 格式 顺序 
把 Number 四 舍 五 入 为 指定 小 数位 数 的 数字 。num 规定 小 数 的 位 数 ， 是 0 一 20 的 值 ， 
包括 0 和 20。 如 果 省 略 了 该 参数 ， 将 用 0 代替 。 返 回 Number 对 象 的 字符 串 表示 ， 不 
采用 指数 记 数 法 ， 小 数 点 后 有 固定 的 num 位 数字 


四 String 对 象 
String 对 象 是 String 基本 数据 类 型 的 对 象 表 示 法 ，String 对 象 是 ECMAScript 中 比较 复 
杂 的 引用 类 型 之 一 。 创 建 String 对 象 的 语法 如 下 ; 


Var oStr=new String(s); 


toFixed(num) 


Var ostr=string(s); 

当 String() 和 运算 符 new 一 起 使 用 时 , 它 返 回 一 个 新 创建 的 String 对 象 , 存放 的 是 字符 
串 s 或 s 的 字符 串 表 示 。 当 不 用 new 运算 符 调用 String0 时 ， 它 只 把 s 转换 成 基本 数据 类 型 
的 字符 串 ， 并 返回 转换 后 的 值 。 

字符 串 是 不 可 变 的 ，String 类 定义 的 方法 都 不 能 改变 字符 串 的 内 容 。 例 如 
String.toUpperCase() 方 法 ， 返 回 的 是 全 新 的 字符 串 ， 而 不 是 修改 原始 字符 串 。 

1) String 对 象 的 常用 属性 

String 对 象 的 常用 属性 只 有 length, 用 于 返回 String 对 象 的 字符 数目 。 例 如 下 面 的 代码 
输出 5， 返回 的 是 字符 串 sStr 的 字符 数目 。 

Var SStr=new String("abcde"); 

sstr.1length; // 输 出 5 


提示 : 即使 字符 串 包含 双 字 节 的 字符 ， 每 个 字符 也 只 算 一 个 字符 。 
2) String 对 象 的 常用 方法 
表 17.4 列 出 了 String 对 象 的 常用 方法 。 

表 17.4 String 对 象 的 常用 方法 
描述 
创建 HTML 锚 。anchormame 为 锚 定 义 名 称 
用 大 号 字体 显示 字符 串 


方 
anchor(anchorname) 
bigO 


法 


blinkO 显示 办 动 的 字符 串 
bold0 使 用 粗 体 显 地 


返回 指定 位 置 的 字符 。index 表示 字符 串 中 某 个 位 置 的 数字 
返回 指定 位 置 的 字符 的 Unicode 编码 。index 表示 字符 串 中 某 个 


charAt(index) 


charCodeAt(index) 位 置 的 数字 
过 榨 字 符 帅 .cmox 忆 交 被 连 榨 六 一 个 字符 册 的 一 个 或 名 个 空 
oan 连接 字符 申 。stringX 是 将 被 连接 为 一 个 字符 串 的 一 个 或 多 个 字 


符 串 对 象 

以 打字 机 文本 显示 字符 串 
使 用 指定 的 颜色 来 显示 字符 串 。color 为 字符 串 规定 字体 颜色 
使 用 指定 的 尺寸 来 显示 字符 串 。size 必须 是 从 1 到 7 的 数字 
从 字符 编码 创建 一 个 字符 串 。numX 是 一 个 或 多 个 Unicode 值 


fixed0) 


fontcolor(color) 


fontsize(size) 
们 omCharCode(numX.numX,… ,numX) 
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描述 


indexOf(searchvalue,fromindex) 


检索 字符 串 ， 返 回 一 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 
位 置 。searchvalue 为 必需 参数 ， 规 定 需 要 检索 的 字符 串 值 。 
fromindex 为 可 选 参数 ， 规 定 在 字符 串 中 开始 检索 的 位 置 ， 取 值 
为 0 到 stringObjectlength - 1， 如 果 省 略 ， 则 从 字符 串 的 首 字符 
开始 检索 


italics() 


使 用 斜体 显示 字符 中 


lastIndexOf(searchvalue,fromindex) 


从 后 向 前 搜索 字符 串 ， 返 回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 
置 。searchvalue 为 必需 参数 ， 规 定 需 要 检索 的 字符 串 值 。 
fromindex 为 可 选 参 数 ， 规 定 在 字符 串 中 开始 检索 的 位 置 ， 取 值 
为 0 到 stringObjectlength - 1， 如 果 省 略 ， 则 从 字符 串 的 最 后 一 
个 字符 处 开始 检索 


link(url) 


localeCompare(target) 


match(searchvaluellregexp) 


replace(regexp/substr,replacement) 


search(regexp) 


slice(start,end) 


将 字符 串 显示 为 链接 。url 规定 要 链接 的 URL 

用 本 地 特定 的 顺序 来 比较 两 个 字符 串 。target 为 要 以 本 地 特定 的 
顺序 与 stringObject 进行 比较 的 字符 串 
在 字符 串 内 检索 指定 的 值 ， 或 者 找到 一 个 或 多 个 正则 表达 式 前 
匹配 ， 类 似 indexOfD， 但 是 它 返 回 指定 的 值 ， 而 不 是 字符 串 的 
位 置 。searchvalue 规定 要 检索 的 字符 串 值 。regexp 规定 要 匹配 
的 模式 的 RegExp 对 象 

在 字符 串 中 用 一 些 字符 替换 男 一 些 字符 
达 式 匹配 的 子 串 。regexp/substr 规定 子 字 
RegExp 对 象 。replacement 规定 了 替换 文本 
函数 


或 替换 一 个 与 正则 表 
要 蔡 换 的 模式 的 
或 生成 替换 文本 的 


检索 字符 串 中 指定 的 子 字符 串 ， 或 检索 与 正则 表达 式 相 匹配 的 
子 : 


守 串 , 返回 stringObject 中 第 1 个 与 regexp 相 匹配 的 子 串 的 
起 始 位 置 。regexp 可 以 是 在 stringObject 中 检索 的 子 串 ， 也 可 以 
是 检索 的 RegExp 对 象 

提取 字符 串 的 片段 , 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 。start 
为 起 始 下 标 ， 如 果 是 负数 ， 则 规定 的 是 从 字符 串 的 尾部 开始 算 
起 的 位 置 ， 也 就 是 说 ，-1 指 字符 串 的 最 后 一 个 字符 ，-2 指 倒数 
第 2 个 字符 ， 依 此 类 推 。end 为 结束 下 标 ， 若 未 指定 ， 则 要 提取 
的 子 串 包括 start 型 串 结尾 的 字符 串 


small(O) 


使 用 小 字号 来 显示 字符 串 


split(separator,howmany) 


把 字符 串 分 割 为 字符 串 数组 。separator 必需 ， 从 该 参数 指定 的 
地 方 分 割 stringObject。howmany 可 选 ， 指 定 返 回 数组 的 最 大 长 
度 ， 如 果 没有 设置 该 参数 ， 整 个 字符 串 都 会 被 分 割 ， 不 考虑 它 
的 长 度 


strike() 
sub() 


substr(start,length) 


使 用 删除 线 来 显示 字符 串 

把 字符 串 显示 为 下 标 

从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 。start 必需 ， 是 要 
提取 子 串 的 起 始 下 标 。length 可 选 ， 是 子 串 中 的 字符 数 


substring(start,stop) 


提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 。start 必需 ， 规 定 
要 提取 子 串 的 第 1 个 字符 在 stringObject 中 的 位 置 。stop 可 选 ， 
比 要 提取 的 子 串 的 最 后 一 个 字符 在 stringObject 中 的 位 置 多 1。 
返回 的 子 串 包括 start 处 的 字符 ， 但 不 包括 stop 处 的 字符 
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续 表 

方 法 描 述 
sup0 把 字符 串 显示 为 上 标 
toLocaleLowerCase() 把 字符 串 转 换 为 小 写 
toLocaleUpperCase() 把 字符 串 转换 为 大 写 
toLowerCase() 把 字符 串 转 换 为 小 写 
toUpperCase() 把 字符 串 转换 为 大 写 
toSource() 代表 对 象 的 源 代码 


(1) charAt0 和 charCodeAt() 方 法 : charAt() 和 charCodeAt() 方 法 访问 的 是 字符 串 中 的 单 
个 字符 。 这 两 个 方法 都 有 一 个 参数 ， 即 要 操作 的 字符 的 位 置 。charAt( 方 法 返回 的 是 包含 指 
定位 置 处 的 字符 的 字符 串 ， 如 果 想 得 到 的 不 是 字符 ， 而 是 字符 编码 ， 那 么 可 以 调用 


charCodeAt() 方 法 。 例 如 : 
Var oStringobject=new String("hello world"); 
ostringObject.charat (1); // 输 出 "e" 
ostringObject.charCodeAt (1); // 输 出 101 


在 字符 串 “hello world” 中 ， 位 置 1 处 的 字符 是 “e”。“101” 是 小 写字 母 “e” 的 字符 
编码 。 

(2) indexOf() 和 lastIndexOf0 方 法 : indexOfO 和 lastIndexOf0) 方 法 返回 的 都 是 指定 的 子 
串 在 另 一 个 字符 串 中 的 位 置 ,， 如果 没有 找到 子 串 ， 则 返回 -1。 这 两 个 方法 的 不 同 之 处 在 于 ， 
indexOf0) 方 法 是 从 字符 串 的 开头 (位 置 0) 开始 检索 子 串 ， 而 lastIndexOf0 方 法 则 是 从 字符 
串 的 结尾 开始 检索 子囊。 例如: 

Var oStringobject=new String("hello world!"); 


oStringobject.indexOof ("o") 7 // 输 出 4 
oStringobject.1lastIndexOf ("o"); // 输 出 7 


第 1 个 “o” 字 符 出 现在 位 置 4， 最 后 一 个 “o” 出 现在 位 置 7。 

(3) slice0 和 substring(): ECMAScript 提供 了 两 种 方法 从 字符 串 中 创建 子 串 ， 即 slice() 
和 substring()。 这 两 种 方法 返回 的 都 是 要 处 理 的 字符 串 的 子 串 ， 都 接受 一 个 或 两 个 参数 。 
第 1 个 参数 是 要 获取 的 子 串 的 起 始 位 置 ， 第 2 个 参数 (如 果 使 用 ) 是 要 获取 子 串 终止 前 的 
位 置 (也 就 是 说 ,获取 终止 位 置 处 的 字符 不 包括 在 返回 的 值 内 )。 如 果 省 略 第 2 个 参数 ， 默 
认 到 终止 位 置 。 

slice0 和 substring() 方 法 都 不 改变 String 对 象 自身 的 值 。 它 们 只 返回 基本 的 String 值 ， 
保持 String 对 象 不 变 。 例 如 : 


Var oStringObject=new String("hello world") 7 


ostringOobject.slice("3"); // 输 出 "lo world" 
ostringObject.substring ("3"); // 输 出 "lo world" 
ostringOobject.slice("3,7"); // 输 出 "lo w" 
ostringobject.substring("3,7"); // 输 出 "lo w" 


在 第 1 个 参数 为 负数 时 ， 这 两 个 方法 的 处 理 方式 稍 有 不 同 。 对 于 负数 参数 ，slice() 方 
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法 会 用 字符 串 的 长 度 加 上 参数 ，substring() 方 法 则 将 其 作为 0 处 理 。 例 如: 
Var oStringObject=new String("hello world") 7 
OStringobject.slice("-3") 7 
oOStringobject.substring("-3") 7 


当 只 有 参数 -3 时 ，slice0 返 回 “rld”，substring() 则 返回 “hello world”。 这 是 因为 对 于 
字符 串 “hello world”，slice("-3") 将 被 转换 成 slice("8")， 而 substring("-3") 将 被 转换 成 
substring("0")。 

(4) toLowerCase0 和 toUpperCase() 方 法 : 这 两 个 方法 用 于 字符 串 的 大 小 写 转换 ， 
toLowerCase() 方 法 用 于 把 字符 串 全 部 转换 成 小 写 ，toUpperCase() 方 法 用 于 把 字符 串 全 部 转 
换 成 大 写 。 例 如 : 

Var oSO=new String("Hello World"); 


oS0.toUpperCase (); // 输 出 "HELLO WORLD" 
oS0.toLowerCase (); // 输 出 "hello world" 


人 @ instanceof 运算 符 
instanceof 运算 符 与 typeof 运算 符 相 似 ， 用 于 识别 正在 处 理 的 对 象 的 类 型 。 与 typeof 
不 同 的 是 ，instanceof 能 够 确认 对 象 为 某 种 特定 类 型 。 例 如 : 


Var oStringObject=new String("hello world"); 
oStringobject instanceof String;  // 输 出 true 


变量 oStringObject 的 确 是 String 对 象 的 实例 ， 因 此 结果 为 “true ”。 
17.2.4 ” ECMAScript 对 象 类 型 


- 般 来 说 ， 可 以 创建 并 使 用 的 对 象 类 型 有 3 种 ， 即 本 地 对 象 、 内 置 对 象 和 宿主 对 象 。 

@ 本 地 对 象 

ECMA-262 把 本 地 对 象 native object) 定义 为 “独立 于 宿主 环境 的 ECMAScript 实现 
提供 的 对 象 ”。 本 地 对 象 是 ECMA-262 定义 的 类 (引用 类 型 ), 包括 Object、 Function、Array、 
String、 Boolean、Number、Date、RegExp、Error、 EvalError、RangeError、ReferenceError、 
SyntaxError、TypeError 和 URIError。 

人 @ 内 置 对 象 

ECMA-262 把 内 置 对 象 (built-in object) 定义 为 “由 ECMAScript 实现 提供 的 、 独 立 于 
宿主 环境 的 所 有 对 象 , 在 ECMAScript 程序 开始 执行 时 出 现 ” 这 意味 着 不 必 实 例 化 内 置 对 
象 就 可 以 直接 使 用 。ECMA-262 只 定义 了 两 个 内 置 对 象 ， 即 Global 和 Math。 根 据 定义 ， 
内 置 对 象 也 是 本 地 对 象 。 

@ 宿主 对 象 

所 有 非 本 地 对 象 都 是 宿主 对 象 ， 即 由 ECMAScript 实现 的 宿主 环境 提供 的 对 象 BOM 
和 DOM 对 象 是 宿主 对 象 。 
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17.3 ”错误 处 理 


@ try…catch…finally 语句 
try…catch…finally 是 ECMAScript 提供 的 异常 处 理 机 制 ， 作 用 是 测试 代码 中 的 错误 。 
其 语法 如 下 : 


tryt{ 
// 这 段 代码 从 上 往 下 运行 ， 其 中 任何 一 个 语句 抛 出 异常 该 代码 块 就 结束 运行 
} 

catch(e){ 


// 如 果 try 代码 块 中 抛 出 了 异常 ，catch 代码 块 中 的 代码 就 会 被 执行 
//e 是 一 个 局 部 变量 ， 用 来 指向 Error 对 象 或 者 其 他 抛 出 的 对 象 
|， 

finallyt{ 
// 无 论 try 中 的 代码 是 否 有 异常 抛 出 ，finally 代码 块 始终 会 被 执行 
} 


try…catch…finally 语句 中 除了 try 以 外 catch 和 finally 都 是 可 选 的 (两 者 必须 要 有 一 个 )。 
提示 : try…catch…finally 使 用 小 写字 母 ， 使 用 大 写字 母 会 出 错 。 


在 ECMAScript 中 ， 异 常 是 作为 Error 对 象 出 现 的 。Error 对 象 有 两 个 属性 ， 其 中 name 
属性 表示 异常 的 类 型 ，message 属性 表示 异常 的 含义 。 根 据 这 些 属性 的 取 值 可 以 决定 处 理 
异常 的 方式 。 

Error.name 的 取 值 一 共有 6 种 。 

(1) EvalError: eval() 的 使 用 与 定义 不 一 致 。 

(2) RangeError: 数值 越界 。 

(3) ReferenceError: 非法 或 不 能 识别 的 引用 数值 。 

(4) SyntaxError: 发 生 语法 解析 错误 。 

(5) TypeError: 操作 数 类 型 错误 。 

(6) URIEror: URI 处 理 函 数 使 用 不 当 。 e 

而]17.12 js(try-catch).html， 原 本 在 页 面 载 入 时 显示 “欢迎 !” 消 息 ， 视频 讲解 
不 过 alert0 被 误 写 为 addlert0, 当 用 正 浏览 
器 打开 时 错误 发 生 了 ， 如 图 17.2 左下 角 所 ” 叱 于 Me EE 
示 的 黄色 警示 图 标 。 图 17.2 js(try-cateh).html 示意 图 


<head> 

<title>try-catch 异常 处 理 </title> 
<script> 

addlert ("欢迎 !1") / /语句 错误 
</head> 

<body> 

</body> 
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双击 黄色 警示 图 标 显 示 错误 信息 提示 ， 如 图 17.3 所 示 。 


Vindows Internet Explorer 


此 网 页 上 的 错误 可 能 会 使 它 无 法 正确 运行 
要 格 来 查看 此 消息 ,请 双击 状态 栏 上 的 警 当 | 


献 少 对 入 

jsltry-catch). htnl 

代码 : 0 

URI: file;7/AF :7 教案 /Web 技 术 基础 /Web 技 术 基础 -2012/ 例 子 /js (tr 六 catch). html 


口 对 于 网 页 错误 始终 显示 此 消息 人 A) 复制 错误 详细 信息 (C) 
人 @ 隐藏 详细 信息 (D) 


图 17.3 js(try-catch).html 错误 提示 


用 try…catch…finally 语句 重新 修改 脚本 ， 由 
误 写 了 alert0， 所 以 错误 发 生 了 ， 不 过 catch 捕 
a 了 错误 , 并 用 一 段 准 备 好 的 代码 来 处 理 这 个 错 。 | 3》 村 下 PT 
吴 。 这 段 代 码 会 显示 一 个 出 错 信息 来 告知 用 户 所 发 己 要 十 
生 的 事情 ， 并 让 用 户 选择 在 发 生 错误 时 单 击 【 确 定 】 
按钮 继续 浏览 网 页 ， 还 是 单 击 【 取 消 】 按 钮 返回 到 图 17.4 js(try-cateh) html 信息 框 
首页 ， 如 图 17.4 所 示 。 
源 代码 如 下 : 
<head> 
<title>try-catch 异常 处 理 </title> 
<script> 
War STREt= 
try { 
addlert ("欢迎 !") ; 
catch (e){ 
sTxt+=" 语 句 错误 :" + e.name + " 错误 描述 :" + e.message + "\n"; 
sTxt+=" 单 击 确定 继续 浏览 ， 单 击 取消 返回 首页 。\n"; 
EUVConEirm{lsTztny 
document .location.href=" http://www.tsinghua.edu.cn/"; 
} 


</script> 

</head> 

<body> 
</body> 
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四 throw 声明 

throw 声明 的 作用 是 创建 exception (异常)。 用 户 可 以 把 这 个 声明 与 ty…catch…finally 
配合 使 用 ， 以 达到 控制 程序 流 并 产生 精确 错误 消息 的 目的 。 其 语法 如 下 : 


throw (exception) 


其 中 ，expression 可 以 是 任何 一 种 类 型 ， 也 就 是 说 throw("There is a error") 或 者 throw(1001) 
都 是 正确 的 ， 但 通常 会 抛 出 一 个 Error 对 象 。 
[ 圆 17.13 js(throw)html， 该 页 面 用 于 测定 变量 iNum 的 值 。 如 果 iNum 的 值 大 于 10 
或 者 小 于 0， 蜡 常 就 会 被 抛 出 ， 异 常 被 catch 的 参数 捕获 后 会 显示 出 自 定义 的 出 错 信息 。 
源 代码 如 下 : 
<head> 
<title>throw 异常 抛 出 </title> 
<script> 
var iNum=parseInt (prompt ("输入 0 一 10 的 数 :","")) 
try{ 
if (iNum>10){ 
throw ("Errl") 
}else if(iNum<0){ 
throw ("Err2") 
} 


} 
catch(e){ 
if (e=="Err1") { 
alert ("错误 ! 这 个 数 太 大 了 。") 
} 
if (e=="Err2") { 
alert ("错误 ! 这 个 数 太 小 了 。") 
} 
} 
</script> 
</head> 
<body> 
</body> 


17.4 ”内 置 对 象 和 本 地 对 象 


17.4.1 ”Math 对 象 


Math 对 象 用 于 执行 数学 任务 。Math 是 内 置 对 象 ， 无 须 创建 或 实例 化 ,通过 把 Math 作 
为 对 象 使 用 就 可 以 调用 其 所 有 属性 和 方法 。 例 如 : 
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Var fPi = Math.PI; 
fpi; // 输 出 3.1415926 


@ Math 对 象 的 属性 
表 17.5 列 出 了 Math 对 象 的 常用 属性 。 
表 17.5 Math 对 象 的 属性 
属 性 描 述 
EB | 返回 算术 常量 e， 即 自然 对 数 的 底数 〈 约 等 于 2.718) 
LN2 | 返回 2 的 自然 对 数 〈 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 〈 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 〈 约 等 于 1.414) 
LOGI10E | 返回 以 10 为 底 的 e 的 对 数 〔 约 等 于 0.434) 
PI | 返回 圆周 率 ( 约 等 于 3.14159) 


SQRT2 返回 2 的 平方 根 〈 约 等 于 1.414) 


@ Math 对 象 的 方法 
表 17.6 列 出 了 Math 对 象 的 常用 方法 。 
表 17.6 Math 对 象 的 方法 


方 法 描 述 

abs(x) 返回 数 的 绝对 值 

acos(x) 返回 数 的 反 余弦 值 

asin(x) 返回 数 的 反正 弦 值 

atan(x) 用 -PV2~PL2 弧度 的 数值 来 返回 x 的 反正 切 值 
cos(x) 返回 数 的 余弦 

exp(x) 返回 e 的 指数 

floor(x) 返回 小 于 等 于 x 且 与 x 最 接近 的 整数 
log(x) 返回 数 的 自然 对 数 〈 底 为 e) 

max(x.y) 返回 x 和 y 中 的 最 大 值 

min(x.y) 返回 x 和 y 中 的 最 小 值 

pow(x.y) 返回 x 的 y 次 宕 

random() 返回 0 一 1 的 随机 数 

round(x) 把 数 四 舍 五 入 为 最 接近 的 整数 

sin(x) 返回 数 的 正弦 

sqrt(x) 返回 数 的 平方 根 

tan(x) 返回 角 的 正切 

toSource() 返回 该 对 象 的 源 代码 


17.4.2 ”全 局 对 象 


全 局 对 象 是 内 置 对 象 ， 通 过 使 用 全 局 对 象 可 以 访问 所 有 其 定义 的 对 象 、 函 数 和 属性 。 
全 局 对 象 不 是 任何 对 象 的 属性 ， 所 以 它 没有 名 称 。 例 如 JavaScript 代码 使 用 parseInt0 函 数 
时 ， 它 使 用 的 是 全 局 对 象 的 parseInt()。 
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ECMAScript 标准 没有 规定 全 局 对 象 的 类 型 ， 全 局 对 象 通常 与 脚本 的 环境 相关 。 
JavaScript 可 以 把 任意 类 型 的 对 象 作 为 全 局 对 象 , 只 要 该 对 象 定义 了 全 局 属性 和 函数 。 一 般 
在 客户 端 JavaScript 中 全 局 对 象 是 Window 对 和 象 。 

全 局 对 象 属性 和 函数 (方法 ) 可 用 于 所 有 内 建 的 JavaScript 对 象 。 

@ 全 局 对 象 函数 (方法 ) 


表 17.7 列 出 了 常用 的 全 局 对 象 函数 (方法 )。 
表 17.7 全 局 对 象 函数 (方法) 

函数 (方法 ) 描 述 
decodeURI(URIstring) 解码 URIstring 字符 串 某 个 编码 的 URI 
encodeURI(URIstring) 把 URIstring 字符 串 编码 为 URI 
eval(string) 计算 字符 串 中 表达 式 的 值 ， 并 执行 其 中 的 JavaScript 代码 
isFinite(number) 检查 某 个 值 是 否 为 有 穷 大 的 数 
isNaN(x) 检查 某 个 值 是 否 为 数字 
Number(object) 把 对 象 的 值 转 了 加 
parseFloat(string) 解析 一 个 三 个 
parseInt(string) 解析 一 个 字符 串 和 一 个 整数 
String(object) 把 对 象 的 值 转换 为 字符 串 


函数 encodeURIO 的 目的 是 给 URI 进行 编码 ,参数 中 的 ASCI 字母 、 数 字 不 编码 ，URI 
中 具有 特殊 意义 的 字符 也 不 编码 ， 包 括 ,、 一 、_、.、!、~、*、"、()、; /7?、:、@,&、 
=、 二 、$、,、#、 空 格 。 参 数 中 的 其 他 字符 将 转换 成 UTF-8 编码 方式 的 字符 ， 并 使 用 十 六 
进 制 转 义 序列 〈%xx) 生成 替换 。 其 中 ，ASCII 字符 使 用 一 个 %xx 替换 ， 在 \u0080 一 \u07 企 
编码 的 Unicode 字符 使 用 两 个 %xx 替换 ， 其 他 的 16 位 Unicode 字符 使 用 3 个 %xx 替换 。 

如 果 用 户 想 对 URI 的 分 隔 符 “?” 和 “#?” 编 码 ， 应 该 使 用 函数 encodeURIComponent()。 

使 用 函数 decodeURIO 可 以 还 原 函 数 encodeURIO 编 码 的 字符 串 。 例 如 : 

var sStr=" 清 华 大 学 http://www.tsinghua.edu.cn/"; 

ssStr=encodeURI (ssStr); 

ssStr; // 输 出 "S$E6%B8%85%E5%8D%8ESE5%A4%A7%E5%ADSA6%20http:www. tsinghua. 

//edu.cn/™ 
ssStr=decodeURI (ssStr); 
sstr; // 输 出 "清华 大 学 http://www.tsinghua.edu.cn/" 


bd 


表 17.8 全 局 属性 


描述 
代表 正 的 无 穷 大 的 数值 
某 个 值 是 不 是 数字 值 

未 定义 的 值 


NaN 
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17.4.3 ”Array 对 象 


Array 对 象 用 于 在 单个 变量 中 存储 多 个 值 。 创 建 Array 对 象 的 语法 如 下 : 


new Array(); 


new Array (size); 
new Array(element0, elementl, **, elementn); 


如 果 调 用 ArrayO 时 没有 使 用 参数 ,那么 返回 的 数组 为 空 ,length 属性 为 0。 当 调用 Array() 
上 时 只 传递 给 它 一 个 数字 参数 size,， 将 返回 具有 指定 个 数 且 元 素 值 为 undefined 的 数组 。 当 使 
日 参数 element0，element1，…，elementn 调用 Array0 时 将 用 参数 指定 的 值 初始 化 数组 。 


@ Array 对 象 的 属性 
Array 对 象 的 常用 属性 只 有 length, 用 于 返回 数组 中 元 素 的 数目 。 例如 下 面 的 代码 输出 


5， 返 回 的 是 数组 aArr 中 元 素 的 数目 。 


Var aArr=new Array(10,5,40,25,100); 
aArr.length; // 输 出 5 


四 Array 对 象 的 方法 
表 17.9 列 出 了 Array 对 象 的 常用 方法 。 
表 17.9 Array 对 象 的 方法 
描 述 

向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 
长 度 。newelementl 必需 ， 指 要 添加 到 数组 的 第 1 
个 元 素 
向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 
长 度 。unshift0 方 法 直接 修改 原 有 的 数组 。 
newelementl 必需 ， 是 向 数组 添加 的 第 1 个 元 素 
连接 两 个 或 更 多 的 数组 ， 并 返回 结果 。arrayX 必 
需 ， 该 参数 可 以 是 具体 的 值 ， 也 可 以 是 数组 对 象 
删除 数组 的 最 后 一 个 元 素 ， 把 数组 的 长 度 减 1, 返 
popO 回 删 除 的 元 素 的 值 。 如 果 数 组 已 经 为 空 ， 返 回 

undefined 的 值 

把 数组 的 第 1 个 元 素 从 其 中 删除 ， 并 返回 第 1 个 
shift() 元 素 的 值 。 如 果 数 组 是 空 的 ， 将 不 进行 任何 操作 ， 

返回 undefined 的 值 

从 数组 中 添加 /删除 项 目 , 然后 返回 被 删除 的 项 目 。 

该 方法 会 改变 原始 数组 

index 必需 ， 整 数 ， 规 定 添加 /删除 项 目的 位 置 ， 使 
splice(index,howmany,item!l,*…,itemX) 用 负数 可 以 从 数组 结尾 处 规定 位 置 

howmany 必需 ， 要 删除 的 项 目 数量 。 如 果 为 0， 则 

不 删除 

item1,…, itemX 可 选 ， 为 向 数组 添加 的 新 项 目 


push(newelementl,newelement2,…,newelementX) 


unshift(newelement] ,newelement2,*…,newelementX) 


concat(arrayX,arrayX,***,arrayX) 
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方法 描 述 
从 某 个 已 有 的 数组 返回 选 定 的 元 素 , 返回 一 个 新 的 
数组 , 包含 从 start 到 end (不 包括 该 元 素 ) 的 元 素 。 
start 必需 ， 规 定 从 何 处 开始 选取 ， 如 果 是 负数 ， 规 
定 从 数组 尾部 开始 算 起 的 位 置 ， 即 -1 指 最 后 一 个 
元 素 , -2 指 倒数 第 2 个 元 素 , 依 此 类 推 。end 可 选 ， 
规定 从 何 处 结束 选取 ， 如果 没有 指定 ， 那么 切 分 的 
数组 包含 从 start 到 数组 结束 的 所 有 元 素 ， 如 果 参 
数 是 负数 ， 规 定 的 是 从 数组 尾部 开始 算 起 的 元 素 
颠倒 数组 中 元 素 的 顺序 。 该 方法 会 改变 原来 的 数 
组 ， 而 不 会 创建 新 的 数组 
对 数组 的 元 素 进行 排序 ， 该 方法 会 改变 原来 的 数 
组 ， 而 不 会 创建 新 的 数组 。sortby 可 选 ， 必 须 是 函 
数 ， 规 定 排序 顺序 ,一 般 用 在 数组 元 素 值 是 数值 型 
prilsortby) 的 数组 上 。 
排序 函数 : 
function sortNumber(a,b) {return a-b} 
toSource0) 返回 该 对 象 的 源 代码 
toLocaleString() 把 数组 转换 为 本 地 字符 串 ， -并 返回 结果 
把 数组 的 所 有 元 素 放 入 一 
join(separator) 选 ， 指 定 要 使 用 的 分 隔 符 。 en 
用 逗号 作为 分 隔 符 


对 数组 元 素 的 引用 可 以 使 用 数组 名 或 索引 值 ， 也 可 以 使 用 forin 循环 进行 遍历 。 
圆 17.14 js(Array)html， 说 明了 如 何 定义 数组 并 使 用 ， 如 图 17.5 所 示 。 


slice(start,end) 


reverse() 


3 。 separator 可 
略 该 参数 ， 则 使 


aarr 数 组 元 素 为 大 信用 数组 各 和 由 ) 。 5, 40, 25, 100 
aArr 数 组 元 素 个 数 

aArr 第 人 《全 有机 由) : 40 
aArr 数 组 元 素 为 《使 用 for in 输出 ) : 5 40 25 100 


aArr 数 组 第 2 个 到 第 3 个 元 素 为 ，5, 40 i 
aarr 数 组 排序 为 ，5, 10, 25, 40, 100 史 
arr 数 组 倒序 为 ，100, 40, 25, 10, 5 视频 讲解 


图 17.5 js(Array).html 示意 图 


源 代码 如 下 : 


<head> 
<title>Array 数组 </title> 
<script> 
window.onload=function(){ 

Var aArr=new Array(10,5,40,25,100); 

function sortNumber(a,b) {return a - b}; 

document .getElementById ("showarrayl1") .innerHTML="aArr 数组 元 素 为 (使 用 数 
组 名 输出 ): "+aArr+"<br />aArr 数组 元 素 个 数 为 : "+aArr.length+"<br />aArr 第 3 个 
数组 元 素 是 《使 用 数组 索引 值 输出 ): "+aArr[2]; 


Var SStT=""7 
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EOrAvVar Arig aner)t 
sstr+=aArr[al+" "7 


} 


document .getElementById ("showarray2") .innerHTML="aRrr 数组 元 素 为 (使 用 
for in 输出 ): "+sStr+"<br />aArr 数组 第 2 个 到 第 3 个 元 素 为 : "+aArr.slice (1,3)+ 
"<br />aArr 数组 排序 为 "+aArr.sort (sortNumber)+"<br />aArr 数组 倒序 为 : 


"+aArr.reverse(); 


</script></head> 


<body> 


<div id="showarrayl"></div><div id="showarray2"></div> 


</body> 


17.4.4 ”Date 对 象 


Date 对 象 用 于 处 理 日 期 和 时 间 。 创 建 Date 对 象 的 语法 如 下 : 


var oDate=new Date() 


Date 对 象 会 自动 把 当前 日 期 和 时 间 保 存 为 其 初始 值 。 表 17.10 列 出 了 Date 对 象 的 方法 。 


表 17.10 ”Date 对 象 的 方法 


方法 描 述 
Date() 返回 当前 的 日 期 和 时 间 
getDate() 返回 一 个 月 中 的 某 一 天 (1~31) 
getDay0) 返回 一 周 中 的 某 一 天 (0~6) 
getMonthO) 返回 月 份 (0 一 11) 
getFullYear() 返回 四 位 数字 年 
getHours() 返回 小 时 〈0 一 23) 
getMinutes() 返回 分 钟 〈0 一 59) 
getSeconds() 返回 秒 数 (0 一 59) 
getMilliseconds() 返回 毫秒 〈0 一 999) 
getTime() 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffset() 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 差 
getUTCDate() 根据 世界 时 返回 月 中 的 一 天 (1~31) 
getUTCDay0 根据 世界 时 返回 周 中 的 一 天 (0 一 6) 
getUTCMonth() 根据 世界 时 返回 月 份 0 一 11) 
getUTCFullYear0 根据 世界 时 返回 四 位 数 年 份 
getUTCHours| 根据 世界 时 返回 小 时 (0 一 23) 
getUTCMinutes() 根据 世界 时 返回 分 钟 (0 一 59) 
getUTCSeconds() 根据 世界 时 返回 秒 钟 (0 一 59) 
getUTCMilliseconds() 根据 世界 时 返回 毫秒 (0~999) 

. 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 (字符 串 ) 的 毫秒 数 。datestring 

Cai 必需 ， 表 示 日 期 和 时 间 的 字符 串 
setDate(day) 设置 月 的 某 一 天 。day 必需 ,表示 一 个 月 中 的 一 天 的 一 个 数值 (1~31) 
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而 -法 描 述 


设置 月 份 。month 必需 ,表示 月 份 数值 ， 取 值 为 0 (一 月 ) 一 11 (十 二 
月 )。day 可 选 
setFullYear(year,month,day) 设置 年 份 。year 必需 ， 表 示 年 份 的 四 位 整数 ，month 可 选 ，day 可 选 


setMonth(month,day) 


设置 小 时 。hour 必需 ， 表 示 小 时 的 数值 ， 可 取 值 为 0 一 23。min 可 选 ， 
setHours(hour,min,sec,millisec) | 表示 分 钟 的 数值 ， 可 取 值 为 0 一 59。sec 可 选 ， 表 示 秒 的 数值 ， 可 取 值 
为 0 一 59。millisec 可 选 ， 表 示 毫 秒 的 数值 ， 可 取 值 为 0 一 999 


设置 分 钟 。min 必需 ， 表 示 分 钟 的 数值 ， 可 取 值 为 0 一 59。sec 可 选 ， 
setMinutes(min,sec,millisec) 表示 秒 的 数值 ， 可 取 值 为 0 一 599。millisec 可 选 ， 表 示 毫 秒 的 数值 ， 互 
取 值 为 0 一 999 

设置 秒 数 。sec 必需 ， 表 示 秒 的 数值 ， 可 取 值 为 0 一 59。millisec 可 选 
表示 毫秒 的 数值 ， 可 取 值 为 0 一 999 


setSeconds(sec,millisec) 


setMilliseconds(millisec) 设置 毫秒 。millisec 必需 ,表示 毫秒 的 数值 ， 可 取 值 为 0 一 999 
toSource0) 返回 该 对 象 的 源 代码 

toTimeStringO 把 时 间 部 分 转 

toDateString0) 把 日 期 部 分 转折 

toLocaleString(O) 根据 本 地 时 间 格 式 把 Date 对 象 转换 为 

toLocaleTimeString() 根据 本 地 时 间 格 式 把 Date 对 象 的 时 站 

toLocaleDateString0 根据 本 地 时 间 格 式 把 Date 对 象 的 日 期 衣 


17.5” 叮 叮 书 店 首页 显示 日 期 和 时 间 


启动 WebStomm， 打 开 叮 叮 书店 项 目 首页 index.html 及 外 部 样式 表 文 件 视频 讲解 
style.css〈 在 第 14.2 节 建 立 )。 

@ 修改 index.html 

进入 index.html 文件 代码 编辑 区 ， 将 光标 定位 到 “<li><a hre 全 "about html"> 关 于 我 们 
</a></i></ul>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 ， 为 页 面 增加 显示 日 期 和 时 间 的 区 域 。 


<div id="date"></div> 
<div id="time"></div> 


四 定义 样式 
切换 到 style.css 编辑 区 ， 为 日 期 时 间 块 定义 样式 ， 确 定位 置 ， 样 式 如 下 ;: 
/* 日 期 时 间 */ 


#date{position:absolute;top:20px;right:260px;color:hsl (0,0%,100%); 
display: none;} 
#time{position:absolute;top:20px;right:190px;color:hsl (0,0%,100%); 
display: none;} 

/* 大 于 1500px 宽度 时 显示 日 期 时 间 */ 


emedia screen and (min-width:1500px) { 


| 354 


出 现 【新 建 目录 】 对 话 
“js”， 单 击 【确定 】 按 钮 ， 建 立 “js”/ 


#date, #time{display:block;} 


} 
@ 编写 脚本 文件 main.js 
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选中 【项 目 】 列 表 中 的 bookstore 文件 来， 然后 右 击 ， 选 择 【 新 建 】| 【目录 )】 命令 ， 


下 ， 在 【新 建 目 


录 】 对 话 框 里 的 【输入 新 目录 名 称 】 文 本 框 中 输入 


于 存放 脚本 文件 。 


选中 【项 目 】 列 表 中 的 js 文件 夹 ， 然 后 右 击 ， 选 择 【 新 建 】|JavaScript File 命令 ， 出 


Var oDt=new Date(); 
Var sWd=""; 


现 New JavaScript File 对 话 框 ， 在 New JavaScript File 对 话 框 里 的 Name 文本 框 中 输入 
“main” 单 击 【确定 】 按 钮 ， 建 立 “main js” 脚本 文件 ， 在 编辑 区 中 输入 以 下 程序 : 


window.onload=function(){ 


var iWeekDay=oDt.getDay(); 


Switch (iWeekDay) { 
case 0: 
swd=" 星 期 日 ";break; 
case ls: 
sWd=" 星 期 一 " ;break; 
Casel2> 
sWd=" 星 期 二 " ;break; 
case 3: 
sWd=" 星 期 三 ";break; 
case 4: 
swd=" 星 期 四 " ;break; 
case Ss: 
sWd=" 星 期 五 ";break; 
Case 6: 
sWqd=" 星 期 六 ";break; 
} 


Var iMonth=parseInt (oDt .getMonth())+1; 

document .getElementById("date") .innerHTML="<span>"+oDt .getFullYear ()+ 
"年 "+iMonth+" 月 "+oDt .getDate()+" 日 "+sWd+"</span>"; 

var iTimerid = window.setInterval ("showtime()",1000); 


h 


function showtime(){ 


Var oDt=new Date(); 
var iTimerid; 

Var sTime=""; 

if (oDt.getHours()<10){ 


sTime+="0"+oDt .getHours ()+":";} 


elsel 


sTime+=oDt .getHours ()+":";} 


if(oDt.getMinutes()<10){ 
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sTime+="0"+oDt .getMinutes ()+":";} 
elsef 
sTime+=oDt .getMinutes ()+":";} 
if(oDt.getSeconds ()<10) { 
STime+="0"+oDt .getSeconds ();} 
elsef 
sTime+=oDt .getSeconds ();} 
document .getElementById ("time") .innerHTML="<span>"+sTime+"</span>"; 
1 
语句 “document.getElementById("displaydate").innerHTML ”是 获得 “<div id="display- 
date"></div>” 块 元 素 ， 并 通过 元 素 对 象 属性 “innerHTML ”设置 块 元 素 内容 ， 显 示 日 期 。 
“window.setInterval("showtime(".1000)” 的 “setInterval ”方法 定义 一 个 定时 器 ， 每 隔 
1000 毫秒 〈1 秒 ) 调用 执行 showtime0 函 数 ， 这 样 就 可 以 动态 显示 时 间 了 。 
@ 使 用 main.js 
切换 到 index.html 文件 编辑 区 ,将 光标 定位 到 “<link hre 全 "style.css" rel="stylesheet">” 
后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 : 


<script src="js/main.js"></script> 


这 样 首 页 的 导航 菜单 后 面 就 能 显示 实时 日 期 和 时 间 了 ， 如 图 17.6 所 示 。 


加 呆 忆 店 .国力 上 


书籍 分 类 特有 降价 联系 我 们 关于 我 们 201845 有 25 ME 124826 


图 17.6 叮 叮 书店 首页 显示 日 期 时 间 示 意图 


17.6 ”小结 


本 章 主要 介绍 了 ECMAScript 函数 的 基本 概念 和 调用 方法 ， 详 细 介绍 了 HIML 事件 机 
制 和 常用 事件 ， 介 绍 了 ECMAScript 对 象 的 基本 思想 ， 了 解 了 ECMAScript 错误 处 理 方式 ， 
并 详细 介绍 了 ECMAScript 内 置 对 象 和 本 地 对 象 。 


17.7 “习题 


@ 选择 题 
(1) 分 析 下 面 的 JavaScript 代码 段 ， 输 出 结果 是 〈 )。 


Var aArr=new Array(2,3,4,5,6); 


Var iSum=0; 
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for (var iCv=1;iCv<aArr.length;iCv++){ 
iSum+=aRArr[iCcv]7} 

document .write (isum); 

A. 20 B. 18 Ci 4 DB 
(2) 分 析 下 面 的 JavaScript 代码 段 ， 输 出 结果 是 )。 
Var SStr="I am a student"; 
Var sA=sStr.charAt (9) 7 
document .write(SRA) 7 

A. Iam ast B.u C. udent Dt 
(3 ETP ) 表达 式 产生 一 个 0~7( 含 0、7) 的 随机 整数 。 

A. Math.floor(Math.random()*6) 

B. Math.floor(Math.random()*7) 

C. Math.floor(Math.random()*8) 

D. Math.ceil(Math.random()*8) 
(4) 产生 当前 日 期 的 方法 是 ( ss 


A. Now() B. Date0 C. new Date() D. new Now() 
(5) 在 页 面 上 ， 当 按 下 键盘 的 任意 一 个 键 时 都 会 触发 JavaScript 的 ( ) 事件 。 

A. onFocus B. onBlur C. onSubmit D. onKeyDown 
四 简 答题 


(1) 举例 说 明 如 何 用 JavaScript 创建 自 定 义 对 象 ? 

(2) JavaScript 预定 义 的 常用 内 置 对 象 有 哪些 ? 

(3) 如 何 获取 当前 时 间 ? 

(4) JavaScript 的 数组 有 什么 特色 ? 如 何 定义 和 使 用 数组 ? 

(5) JavaScript 是 如 何 处 理事 件 的 ? JavaScript 中 有 哪些 常用 事件 ? 
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DOM 可 以 以 一 种 独立 于 平台 和 语言 的 方式 访问 和 修改 一 个 页 面 文档 的 内 容 和 结构 ， 
是 表示 和 处 理 HTML 或 XML 文档 的 常用 方法 。 DOM 实际 上 是 以 面向 对 象 方式 描述 文档 
模型 ， 定 义 了 表示 和 修改 文档 所 需 的 对 象 ， 还 定义 了 这 些 对 象 的 行为 和 属性 以 及 这 些 对 象 
之 间 的 关系 。 本 章 首先 介绍 DOM 的 概念 和 基本 构成 ， 接 下 来 详细 介绍 DOM 基本 对 象 ， 
讨论 如 何 正确 地 使 用 DOM 对 象 对 CSS 进行 操作 ， 最 后 详细 介绍 叮 叮 书店 首页 图 片 切换 广 
告 的 实现 过 程 。 

本 章 要 点 : 

< 如 DOM 基本 概念 。 

< 信 DOM 基本 对 象 。 

如 DOM 与 CSS。 


18.1 DOM 概述 


18.1.1 DOM 简介 


DOM (Document Object Model, 文档 对 象 模 型 ) 可 以 以 一 种 独立 于 平台 和 语言 的 方式 
访问 和 修改 一 个 页 面 文档 的 内 容 和 结构 ，DOM 将 整个 页 面 映 射 为 一 个 由 层次 节点 组 成 的 
文件 ， 使 用 DOM 可 以 让 页 面 动态 地 变化 。 例 如 可 以 动态 地 显示 或 隐藏 一 个 元 素 ， 改 变 它 
们 的 属性 ， 增 加 一 个 元 素 等 。 DOM 主要 由 以 下 3 个 部 分 构成 。 

(1) Core DOM: 定义 了 一 套 标准 的 针对 任何 结构 化 文档 的 对 象 。 

(2) XML DOM: 定义 了 一 套 标准 的 针对 XML 文档 的 对 象 。 

(3) HTML DOM: 定义 了 一 套 标准 的 针对 HIML 文档 的 对 象 。 

由 于 HTML 是 按照 XML 规范 重新 定义 的 HIML， 所 以 DOM 的 这 3 个 部 分 都 适用 于 
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HTML 文档 。 

18.1.2 ”节点 和 节点 树 
@@ 节点 
DOM 把 HTML 文档 中 的 每 个 成 分 都 定义 成 一 个 节点 ， 包 括 : 
(1) 整个 文档 是 一 个 文档 节点 。 


(2) 每 个 HTML 标签 是 一 个 元 素 节 点 。 

(3) 包含 在 HTML 标签 中 的 文本 内容 ) 是 文本 节点 。 

(4) HTML 标签 的 每 一 个 属性 是 一 个 属性 节点 。 

(5) 注释 属于 注释 节点 。 

四 节点 树 

HTML 文档 的 所 有 节点 组 成 了 一 个 节点 树 〈 或 文档 树 )，HTML 文档 中 的 每 个 元 素 、 
属性 和 内 容 文 本 等 都 代表 树 中 的 一 个 节点 ， 树 起 始 于 文档 节点 ， 并 由 此 继续 延伸 ， 直 到 所 
有 文本 节点 为 止 。 例 如 下 面 文档 构成 的 节点 树 如 图 18.1 所 示 。 

<!-- 文 档 节 点 --> 


<html><!--<html> 是 元 素 节点 --> 
<head><!--<head> 是 元 素 节点 --> 


<title> 文 档 标题 </title> 
<!-- 其 中 <title> 是 元 素 节点 ,“ 文 档 标 题 ” 是 文本 节点 --> 
</head> 


<body><!--<body> 是 元 素 节点 --> 
<a href="#"> 我 的 链接 </a> 
<!-- 其 中 <a> 是 元 素 节点 ，href 是 属性 节点 ,“ 我 的 链接 ”是 文本 节点 --> 


<h1> 我 的 标题 </h1> 
<!-- 其 中 <h1> 是 元 素 节 点 ,“ 我 的 标题 ”是 文本 节点 --> 
</body> 
</html> 
文档 
Ee 
元 素 : | 元 素 : 
<head> <body> 
于 
元 素 : | 属性 : 元 素 : 元 素 
<title> href <a> <h1> 
[一文 玫 | 文本 : 文本 : 
“文档 标题 ” “我 的 链接 ” “我 的 标题 ” 


图 18.1 节点 树 示 意图 
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一 棵 节点 树 中 的 所 有 节点 彼此 间 都 有 等 级 和 层次 关系 。 

除 文档 节点 之 外 的 每 个 节点 都 有 父 节 点 。 例 如 <head> 和 <body> 的 父 节 点 是 <html> 节 
点 ， 文 本 节点 “我 的 标题 ”的 父 节点 是 <h1> 节 点 。 


大 部 分 元 素 节 点 都 有 子 节点 。 例 如 <head> 节 点 有 一 个 子 节点 一 一 <title> 节 点 ，<title> 
节点 也 有 一 个 子 节点 一 一 文本 节点 “文档 标题 ”。 
当 节点 共享 同一 个 父 节点 时 ， 它 们 就 是 同辈 〈 同 级 节点 )。 例 如 <hl> 和 <a> 是 同辈 ， 因 


为 它们 的 父 节点 均 是 <body> 节 点 。 

节点 也 可 以 拥有 后 代 。 后 代 指 某 个 节点 的 所 有 子 节点 ， 或 者 这 些 子 节点 的 子 节点 ， 依 
此 类 推 。 例 如 所 有 的 文本 节点 都 是 <html> 节 点 的 后 代 ， 而 第 1 个 文本 节点 “文档 标题 ”是 
<head> 节 点 的 后 代 。 

节点 也 可 以 拥有 先辈 。 先 辈 是 某 个 节点 的 父 节 点 ， 或 者 父 节点 的 父 节 点 ， 依 此 类 推 。 
例如 所 有 的 文本 节点 都 可 以 把 <html> 节 点 作为 先辈 节点 。 


18.2 DOM 对 象 


DOM 是 一 组 对 象 的 集合 ， 用 户 通过 对 象 特定 的 属性 和 方法 可 以 操作 这 些 对 象 。 在 实 
际 应 用 中 ， 主 要 使 用 的 DOM 对 象 是 Node 对 象 、HTMLElement 对 象 、HIMLDocument 对 
象 科 HIML DOM 对 象 。 


18.2.1 Node 对 象 


节点 对 象 代表 文档 树 中 的 一 个 节点 ，Node 对 象 是 整个 DOM 的 核心 对 象 。 
@ Node 对 象 的 属性 
每 个 节点 都 拥有 包含 着 关于 节点 某 些 信息 的 属性 。 表 18.1 列 出 了 Node 对 象 的 常用 
属性 。 
表 18.1 Node 对 象 属性 表 


属 性 描述 
nodeType 显示 节点 的 类 型 
nodeName 显示 节点 的 名 称 
nodeValue 显示 节点 的 值 
attributes 所 有 属性 节点 的 集合 (数组 》 
firstChild 表示 某 一 节点 的 第 1 个子 节点 
lastChild 表示 某 一 节点 的 最 后 1 个 子 节点 
childNodes 表示 所 在 节点 的 所 有 子 节 点 
parentNode 表示 所 在 节点 的 父 节 点 
nextSibling 紧 挨 着 当前 节点 的 下 一 个 节点 
PpreviousSibling 紧 挨 着 当前 节点 的 上 一 个 节点 
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nodeName 属性 含有 某 个 节点 的 名 称 。 其 中 : 

(1) 元 素 节 点 的 nodeName 值 是 标签 名 称 。 

(2) 属性 节点 的 nodeName 值 是 属性 名 称 。 

(3) 文本 节点 的 nodeName 值 永远 是 #text。 

(4) 文档 节点 的 nodeName 值 永远 是 #document。 


2) nodeValue 


对 于 文本 节点 ，nodeValue 属性 包含 文本 内 容 。 对 于 属性 节点 ，nodeValue 属性 包含 属 
性 值 。nodeValue 属性 对 于 文档 节点 和 元 素 节 点 不 可 用 。 


3) nodeType 


nodeType 属性 可 返回 节点 的 类 型 。 表 18.2 列 出 了 最 重要 的 节点 类 型 。 


元 素 类 型 
元 素 
属性 
文本 
四 Node 对 象 的 方法 


表 18.2 节点 类 型 表 


节点 方法 包含 着 对 节点 进行 的 各 种 操作 。 表 18.3 列 出 了 Node 对 象 的 主要 方法 。 
表 18.3 Node 对 象 主要 方法 表 


方 法 
hasChildNodesO) 


removeChild(node) 


appendChild(node) 


replaceChild(newnode,oldnode) 


描 述 
判定 一 个 节点 是 否 有 子 节点 ， 如 果 有 返回 tue， 如 果 没 有 返 
回 false 
删除 一 个 节点 。node 为 删除 的 节点 对 象 
node 为 添加 的 节点 对 象 。 该 方法 用 于 向 节点 的 最 后 一 个 子 节 
点 之 后 添加 节点 。 如 果 要 添加 的 节点 是 DOM 对 象 ， 该 方法 
会 移动 节点 , 使 用 此 方法 可 以 从 一 个 元 素 向 另 一 个 元 素 移动 
元 素 
用 新 节点 蔡 换 某 个 子 节点 


insertBefore(newnode,existingnode) 


cloneNode(deep) 


setAttribute(attributename.attributevalue) 


在 指定 的 已 有 子 节点 之 前 插入 新 的 子 节点 。newnode 必需 ， 
指 需要 插入 的 节点 对 象 。existingnode 可 选 ， 表 示 在 其 之 前 
插入 新 节点 ， 如 果 未 规定 ， 则 在 结尾 插入 newnode 
复制 一 个 节点 。 参 数 deep 默认 是 false，true 表示 同时 复制 
所 有 的 子 节点 ，false 表示 仅 复制 当前 节点 

添加 指定 的 属性 ， 并 赋值 。 如 果 属 性 已 存 在 ， 则 仅 设置 /更 
改 值 。attributename 必需 ， 为 添加 属性 的 名 称 。attributevalue 
必需 ， 为 添加 的 属性 值 


getAttribute(attributename) 


返回 指定 属性 名 的 属性 值 。attributename 必需 ， 为 获得 属性 
值 的 属性 名 称 


removeAttribute(attributename) 


删除 指定 的 属性 。 attributename 必需 , 为 移 除 的 属性 的 名 称 。 
该 方法 无 返回 值 
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18.2.2 HTMLEIement 对 象 


HTMLElement 对 象 表示 HTML 文档 中 的 任意 元 素 ， 它 是 HTML DOM 的 基本 对 象 ， 


提供 HTML 元 素 对 象 的 通 
HTMLElement 对 象 继承 了 Node 和 Element 对 象 的 标准 


属性 和 方法 。 


属性 ， 也 实现 了 非 标准 属性 。 


表 18.4 列 出 了 HIMLElement 对 和 象 的 常用 属性 。 
表 18.4 HTMLEIlement 对 象 常用 属性 表 
属 性 描述 
className 规定 元 素 的 class 属性 
id 规定 元 素 的 id 属性 
style 返回 为 当前 元 素 设置 内 联 样式 的 style 属性 对 象 
一 个 currentStyle 对 象 , 表示 页 面 中 的 所 有 样式 声明 按 CSS 层 私 规则 作用 于 
Pt 元 素 的 最 终 样式 
title 规定 元 素 的 title 属性 
innerHTML 规定 元 素 标签 对 之 间 的 所 有 HTML 代码 
outerHTML 规定 元 的 HTML 代码 ， 包 括 innerHTML 和 元 素 自身 标签 


offsetHeight、offsetWidth 


offsetLeft 


offsetTop 


scrollHeight、 scrollWidth 


scrollTop、 scrollLeft 


返回 元 攻 和 宽度 ， 以 像素 为 单位 ， 类 型 为 nt 

返回 当前 元 素 的 左边 界 到 它 的 包含 元 素 的 左边 界 的 偏 移 量 ， 
类 型 为 int 

返回 当前 元 素 的 上 边界 到 它 的 包含 元 素 的 上 边界 的 偏 移 量 ， 
类 型 为 int 

当 一 个 元 素 拥 有 滚动 条 时 返回 元 素 的 完整 的 高 度 和 宽度 ， 以 像素 为 单位 ， 
类 型 为 int 

返回 已 经 滚动 到 元 素 的 左边 界 或 上 边界 的 像素 数 ， 只 有 在 元 素 有 滚动 条 的 
时 候 才 有 用 ， 类 型 为 int 

返回 对 最 近 的 动态 定位 的 包含 元 素 的 引用 ， 所 有 的 偏 移 量 都 根据 该 元 素来 


以 像素 为 单位 ， 


以 像素 为 单位 ， 


CE 决定 。 如 果 将 元 素 的 样式 属性 display 设置 为 none， 则 该 属性 返回 pull 
textContent 设置 或 返回 指定 节点 的 文本 内 容 


18.2.3 HTMLDocument 对 象 


HTMLDocument 对 象 表示 HTML 文档 树 的 根 ， 在 BOM 和 HTML DOM 中 被 称 为 


Document 对 象 。 


@ HTMLDocument 对 象 集合 
表 18.5 列 出 了 常用 HIMLDocument 对 象 集合 。 


表 18.5 HTMLDocument 对 象 集合 
描述 


all[] 


| 文档 中 所 有 的 HTML 元素 


styleSheets[] 


文档 中 所 有 样式 表 对 象 的 集合 ， 包 括 内 部 和 外 部 样式 
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四 HTMLDocument 对 象 的 属性 
表 18.6 列 出 了 常用 HIMLDocument 对 象 属性 。 


表 18.6 HTMLDocument 对 象 属性 


属 性 描 述 
body 返回 对 <body> 元 素 对 象 的 引用 
documentElement 返回 对 <html> 元 素 对 象 的 引用 


四 HTMLDocument 对 象 的 方法 
表 18.7 列 出 了 常用 HIMLDocument 对 象 方法 。 
表 18.7 HTMLDocument 对 象 方法 


方 法 描 述 
createElement(name) 创建 元 素 节点 ， 返 回 一 个 Element 对 象 。name 为 元 素 节点 规定 名 称 
, 创建 拥有 指定 名 称 的 属性 节点 ， 并 返回 新 的 Attr 对 象 。name 为 新 
createAttribute(name) 创建 的 属性 的 名 称 
createTextNode(data) 创建 文本 节点 ， 返 回 Text 对 象 。data 为 字符 串 值 ， 规 定 此 节点 的 文本 
getElementById(id) 返回 拥有 指定 id 的 第 1 个 对 象 
getElementsByName(name) 返回 带 有 指定 元 素 name 属性 名 称 的 对 象 集合 


返回 带 有 指定 标签 名 的 对 象 集合 。 必需 ， 指 需要 获得 的 对 
getElementsByTagName(tagname) pb Se ei 


querySelector(CSS selectors) 返回 指定 CSS 选择 器 元 素 的 第 1 个 子 元 素 
querySelectorAll(CSS selectors) 返回 指定 CSS 选择 器 元 素 的 所 有 元 素 


18.2.4 访问 节点 


通过 DOM 可 以 访问 HTML 文档 中 的 任何 节点 ， 一 般 使 用 以 下 几 种 方法 来 访问 节点 。 

@ 使 用 方法 访问 节点 

用 户 可 以 使 用 HIMLDocument 对 象 的 getElementById0 、getElementsByName 和 
getElementsByTagName() 3 个 方法 来 访问 节点 。 

getElementById( 方 法 可 以 通过 指定 的 ID 来 查找 并 返回 元 素 。 其 语法 如 下 : 

document .getElementById ("ID"); 

getElementsByTagName() 方 法 会 使 用 指定 的 标签 名 查找 并 返回 所 有 的 元 素 ， 返 回 的 元 
素 作为 一 个 节点 列表 集合 或 数组 )。 其 语法 如 下 : 

document .getElementsByTagName ("标签 名 称 "); 
或 者 : 


document .getElementById ("ID") .getElementsByTagName ("标签 名 称 ") ; 


getElementById0 和 getElementsByTagName() 方 法 可 以 查找 整个 HTML 文档 中 的 任何 
HIML 元 素 ， 这 两 种 方法 会 忽略 文档 的 结构 。 如 果 和 希望 查找 文档 中 所 有 的 <p> 元 素 ， 
getElementsByTagName0 会 把 它们 全 部 找到 ， 不 管 <p> 元 素 处 于 文档 中 的 哪个 层次 。 同 样 ， 
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getElementById() 方 法 也 会 返回 正确 的 元 素 ， 不 论 在 文档 结构 中 的 什么 位 置 。 
下 面 这 个 例子 会 返回 所 有 <p> 元 素 的 一 个 节点 列表 ， 并 且 这 些 <p> 元 素 必须 是 id 为 
"maindiv" 的 元 素 的 后 代 : 
document .getElementById ("maindiv") .getElementsByTagName ("p"); 
getElementsByTagName() 方 法 会 返回 一 个 节点 列表 ， 当 使 用 节点 列表 时 ， 通 常 把 此 列 
表 保 存在 一 个 变量 中 ， 然 后 通过 循环 语句 对 整个 列表 项 进行 访问 。 例 如 : 
Var oEp=document .getElementsByTagName ("p"); 
变量 oEp 包含 着 页 面 中 所 有 <p> 元 素 的 一 个 列表 ， 并 且 可 以 通过 它们 的 索引 号 来 访问 
这 些 <p> 元 素 ， 索 引号 从 0 开始 。 使 用 下 面 的 代码 可 以 通过 列表 的 length 属性 来 循环 遍历 
节点 列表 : 
for(var iCv=0;iCv<oEp.length;iCv++){ 
// 处 理 程序 
} 
用 户 也 可 以 通过 索引 号 来 访问 某 个 具体 的 元 素 。 例 如 访问 第 3 个 <p> 元 素 : 


Var oY=oEp[2]; 


getElementsByName() 方 法 与 getElementById() 方 法 相似 ,但 是 它 查 询 元 素 的 name 属性 ， 
而 不 是 id 属性 ， 如 果 一 个 文档 中 有 两 个 以 上 的 标签 name 相同 , 那么 getElementsByName() 
返回 的 也 是 一 个 节点 列表 。 

@ 使 用 属性 访问 节点 

使 用 一 个 元 素 节 点 的 parentNode、firstChild 以 及 lastChild 等 属性 可 以 访问 节点 。 首 先 
要 确定 一 个 元 素 ， 然 后 根据 这 个 元 素 在 节点 树 中 的 结构 对 其 周围 的 节点 进行 访问 ， 主 要 用 


到 元 素 节点 的 3 个 属性 ， 即 parentNode (元素 的 父 节 点 )、firstChild (元 素 的 首 个 子 元 素 ) 
以 及 lastChild (元素 的 最 后 一 个 子 元 素 )。 例 如 有 下 面 的 HTML 片段 : 
<table> 
EL 


“Ed 让 </Ed> 
<td> 赵 二 </td> 
<td> 张 三 </td> 
efEr> 
</table> 


在 上 面 的 HTML 代码 中 ,第 1 个 <td> 是 <tr> 元 素 的 首 个 子 元 素 (firstChild)， 而 最 后 一 
个 <td> 是 <t> 元 素 的 最 后 一 个 子 元 素 (lastChild )，<t> 是 每 个 <td> 元 素 的 父 节 点 
(parentNode )。 

firstChild 最 普遍 的 用 法 是 访问 某 个 元 素 的 文本 节点 。 例 如 : 


Var oEp=document .getElementsByTagName ("p"); 
Var sText=oEp[0] .firstCchild.nodeValue; 
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parentNode 属性 常用 来 改变 文档 的 结构 。 例 如 从 文档 中 删除 id 为 "maindiv" 的 节点 : 


Var oEd=document .getElementById ("maindiv"); 


oEd.parentNode.removeChild (ogEd); 


首先 找到 带 有 指定 id 的 节点 , 然后 移 至 其 父 节点 并 执行 removeChild() 
[项 18.1 js(node)html， 说 明了 对 节点 的 选择 和 操作 。 
源 代码 如 下 : 


<head> 
<title>node 节点 </title> 
<script> 
window.onload=function (){ 
document .getElementById("btnl1") .onclick=function(){ 
displayp ();} 
document .getElementById ("btn2") .onclick=function(){ 
updatep ();} 
document .getElementById ("btn3") .onclick=function(){ 
deletep ();} 


视频 讲解 


} 
function displayp(){ 
Var oEp=document .getElementsByTagName ("p"); 
for (var iCv=0;iCv<oEp.length;iCv++){ 
if (oEp [icv] .firstCchild.nodeType==3)1{ 
alert (" 节 点 名 字 : "+oEp [icv] .firstchild.nodeName+"\n"+" 节 点 类 型 :" 
+oEp [icv] .firstchild.nodeType+"\n"+" 节 点 值 ;: "+oEp [icv] . 
firstchild.nodeValue) 
}elsef{ 
alert ("节点 名 字 : "+oEp [icv] .firstchild.nodeName+"\n"+" 节 点 类 型 : " 
+oEp [icv] .firstchild.nodeType+"\n"+" 节 点 值 : "+oEp[icv] . firstchild. 
firstchild.nodeValue); 
} 


function updatep(){ 
document .getElementById ("pl") .firstchild.nodeValue=" 获 取 属 性 节点 。";} 
function deletep(){ 
var oEp=document .getElementById ("pl1"); 
oEp.parentNode.removeChild (oEp);} 
</script> 
</head> 
<body> 
<p> 对 于 文本 节点 ，nodeValue 属性 包含 文本 内 容 。</p> 
<p> 对 于 属性 节点 ，nodeValue 属性 包含 属性 值 。</p> 
<p><b> 其 中 : </b>nodeValue 属性 对 于 文档 节点 和 元 素 节点 是 不 可 用 的 。</p> 
<p id="pl">attributes 是 所 有 属性 节点 的 集合 (数组 )。</p> 
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<input type="button" value=" 显 示 P 内 容 " id="btnl" /> 
<input type="button" value=" 修 改 P 内 容 " id="btn2" /> 
<input type="button" value=" 删 除 节 点 "id="btn3" /> 
</body> 


@ 使 用 选择 器 访问 节点 

通过 选择 器 访问 节点 主要 是 使 用 querySelector0 或 querySelectorAll0 方 法 获取 文档 元 素 
节点 ， 进 而 对 文档 元 素 进行 操作 。querySelector0 方 法 仅仅 返回 匹配 指定 选择 器 的 第 1 个 元 
素 节点 ， 如 果 需 要 返回 所 有 元 素 节点 ， 需 要 使 用 querySelectorAl1() 方 法 。 

querySelector 系列 方法 选取 的 元 素 节点 是 静态 集合 ， 而 getElementBy 系列 方法 选取 的 
元 素 节点 是 动态 集合 。 也 就 是 说 ， 动 态 集合 选 出 的 元 素 会 随 文档 的 改变 而 改变 ， 而 静态 集 
合 不 会 ， 选 取出 来 后 就 和 文档 无 关 了 。 一 般 来 说 ， 如 果 一 次 查找 就 可 以 选取 到 指定 元 素 节 
点 ， 应 选用 getElementBy 系列 方法 。 


18.3 DOM 与 CSS 


18.3.1 Style 对 象 


Style 对 象 代表 一 个 单独 的 样式 声明 ， 可 以 从 应 用 样式 的 文档 元 素 访 问 Style 对 象 。 使 
用 Style 对 象 属性 的 语法 如 下 : 

document .getElementById("id") .style.property=value 

style 对 象 获取 的 是 内 联 样式 ， 即 元 素 标 签 中 style 属性 的 值 ， 与 CSS 相对 应 ，style 对 
象 主要 有 下 列 属性 。 

@ Background 属性 

Style 对 象 的 Background 属性 如 表 18.8 所 示 。 

表 18.8 Style 对 象 的 Background 属性 


属 性 描述 

background 在 一 行 中 设置 所 有 的 背景 属性 
backgroundAttachment 设置 背景 图 像 是 否 固定 或 随 页 面 滚动 
backgroundColor 设置 元 素 的 背景 颜色 
backgroundImage 设置 元 素 的 背景 图 像 
backgroundPosition 设置 背景 图 像 的 起 始 位 置 
backgroundRepeat 设置 是 否 及 如 何 重复 背景 图 像 

四 Border 和 Margin 属性 

Style 对 象 的 Border 和 Margin 属性 如 表 18.9 所 示 。 

四 Layout 属性 


Style 对 象 的 Layonut 属性 如 表 18.10 所 示 。 
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表 18.9 Style 对 象 的 Border 和 Margin 属性 


属 性 描 述 
border 在 一 行 设置 4 个 边框 的 所 有 属性 
borderBottom 在 一 行 设置 底 边 框 的 所 有 属性 
borderBottomColor 设置 底 边框 的 颜色 
borderBottomStyle 设置 底 边 框 的 样式 
borderBottomWidth 设置 底 边 框 的 宽度 
borderColor 设置 4 个 边框 的 颜色 〈 可 设置 4 种 颜色 ) 
borderLeft 在 一 行 设置 左边 框 的 所 有 属性 
borderLeftColor 设置 左边 框 的 颜色 
borderLeftStyle 设置 左边 框 的 样式 
borderLeftWidth 设置 左边 框 的 宽度 
borderRight 在 一 行 设置 右边 框 的 所 有 属性 
borderRightColor 设置 右边 框 的 颜色 
borderRightStyle 设置 右边 框 的 样式 
borderRightWidth 设置 右边 框 的 宽度 
borderStyle 设置 4 个 边框 的 样式 (可 设置 4 种 样式 ) 
borderTop 在 一 行 设置 项 边框 的 所 有 属性 
borderTopColor 设置 顶 边框 的 颜色 
borderTopStyle 设置 顶 边框 的 样式 
borderTopWidth 设置 项 边框 的 宽度 
borderWidth 设置 4 个 边框 的 宽度 〈 可 设置 4 种 宽度 ) 
margin 设置 元 素 的 边 距 ( 可 设置 4 个 值 ) 
marginBottom 设置 元 素 的 底 边 距 
marginLeft 设置 元 素 的 左边 距 
marginRight 的 右边 距 
marginTop 设置 元 素 的 项 边 距 
padding 设置 元 素 的 填充 (可 设置 4 个 值 ) 
paddingBottom 设置 元 素 的 下 填充 
paddingLeft 设置 元 素 的 左 填充 
paddingRight 设置 元 素 的 右 填 充 
paddingTop 设置 元 素 的 项 填充 
表 18.10 ”Style 对 象 的 Layout 属性 
属 性 描 述 

clear 设置 在 元 素 的 哪 边 不 允许 其 他 的 浮动 元 素 

clip 设置 元 素 的 形状 

content 设置 元 信息 

cssFloat 设置 图 像 或 文本 将 出 现 〈 浮 动 ) 在 另 一 元 素 中 的 何 处 

Cursor 设置 显示 的 指针 类 型 

direction 设置 元 素 的 文本 方向 

display 设置 元 素 如 何 被 显示 

height 设置 元 素 的 高 度 
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续 表 
属 性 描 述 
maxHeight 设置 元 素 的 最 大 高 度 
maxWidth 设置 元 素 的 最 大 宽度 
minHeight 设置 元 素 的 最 小 高 度 
minWidth 设置 元 素 的 最 小 宽度 
overflow 规定 如 何 处 理 不 适合 元 素 盒 的 内 容 
verticalAlign 设置 对 元 素 中 的 内 容 进行 垂直 排列 
visibility 设置 元 素 是 否 可 见 
width 设置 元 素 的 宽度 
@ List 属性 
Style 对 象 的 List 属性 如 表 18.11 所 示 。 
表 18.11 Style 对 象 的 List 属性 
属 性 描 述 
listStyle 在 一 行 设置 列表 的 所 有 属性 
listStyleImage 把 图 像 设 置 为 列表 项 标记 
listStylePosition 标记 的 位 置 
listStyleType 设置 列表 项 标记 的 类 型 


全 Positioning 属性 


Style 对 象 的 Positioning 属性 如 表 18.12 所 示 。 
表 18.12 Style 对 象 的 Positioning 属性 


属 性 描述 
bottom 设置 元 素 的 底 边缘 距离 父 元 素 底 边缘 的 之 上 或 之 下 的 距离 
left 设置 元 素 的 左边 缘 距 离 父 元 素 左边 缘 的 左边 或 右边 的 距离 
position 把 元 素 放置 在 static、relative、absolute 或 fixed 的 位 置 
Tight 设置 元 素 的 右边 缘 距离 父 元 素 右 边缘 的 左边 或 右边 的 距离 
top 设置 元 素 的 项 边缘 距离 父 元 素 顶 边缘 的 之 上 或 之 下 的 距离 
zIndex 设置 元 素 的 堆 登 次 序 
@ Table 居 性 


Style 对 象 的 Table 属性 如 表 18.13 所 示 。 
表 18.13 Style 对 象 的 Table 属性 


属 性 描 述 
borderCollapse 设置 表格 边框 是 否 合并 为 单 边框 , 或 者 像 在 标准 的 HTML 中 那样 分 离 
borderSpacing 设置 分 隔 单元 格 边框 的 距离 
captionSide 设置 表格 标题 的 位 置 
emptyCells 设置 是 否 显示 表格 中 的 空 单 元 格 
tableLayout 设置 用 来 显示 表格 单元 格 、 行 以 及 列 的 算法 
@ Text 属性 
Style 对 象 的 Text 属性 如 表 18.14 所 示 。 
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属 性 描 述 
color 设置 文本 的 颜色 
font 在 一 行 设置 所 有 的 字体 属性 
fontFamily 设置 元 素 的 字体 系列 
fontSize 设置 元 字体 大 小 
fontSizeAdjust 设置 /调整 文本 的 尺寸 
fontStretch 设置 如 何 紧缩 或 伸展 字体 
fontStyle 设置 元 素 的 字体 样式 
fontVariant 用 小 型 大 写字 母 字体 来 显示 文本 
fontWeight 设置 字体 的 粗细 
letterSpacing 设置 字符 间距 
lineHeight 设置 行 间距 
quotes 设置 在 文本 中 使 用 哪 种 引号 
textAlign 排列 文本 
textDecoration 设置 文本 的 修饰 
textIndent 
textShadow t 的 
textTransform 对 文本 设 
whiteSpace 设置 如 何 设置 文本 中 的 折 行 和 空白 符 
wordSpacing 设置 文本 中 的 词 间距 


[ 贺 18.2 js(Style)html， 说 明了 设置 Style 对 象 属性 的 方法 ， 如 图 18.2 ” 国 } 
所 示 。 单 击 【 不 显示 段落 】 按 钮 ， 隐 藏 上 面 的 段落 ， 单 击 【 改 变 文本 颜色 】 
按钮 ， 两 个 段落 的 文本 颜色 被 改变 ， 单 击 【 设 置 左边 距 50px】 按 钮 ， 此 按 


钮 向 右 移 50px， 如 图 18.3 所 示 。 


这 是 一 些 文本 。 
不 显示 段落 


这 是 一 个 段落 。 


这 是 另 一 个 段落 。 


改变 文本 颜色 
设置 左边 距 50px 


站 


视频 讲解 


图 18.2 js(Style).html 示意 图 1 


源 代码 如 下 : 
<head> 
<title>Style 对 象 </title> 


SEE 了 IE 
window.onload=function(){ 


设置 左边 距 50px 


图 18.3 js(Style).html 示意 图 2 


document .getElementById("btnl") .onclick=function(){ 


document .getElementById ("pl1") .style.display="none";} 


document .getElementById ("btn2") .onclick=function(){ 
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document .getElementById("p2") .style.color="#FF0000"; 
document .getElementById("p3") .style.color="#00FF00";} 
document .getElementById ("btn3") .onclick=function(){ 

document .getElementById ("btn3") .style.left="50px";} 

</script> 

<style type="text/css"> 

input {position:absolute;} 

</style> 

</head> 

<body> 

<p id="p1"> 这 是 一 些 文本 。</p> 

<input type="button" id="btnl" value=" 不 显示 段落 " /><br /> 

<p id="p2"> 这 是 一 个 段落 。</p><p id="p3"> 这 是 另 一 个 段落 。</p> 

<input type="button" id="btn2" value=" 改 变 文本 颜色 " /><br /> 

<input type="button" id="btn3" value=" 设 置 左边 距 50px" /> 

</body> 


18.3.2 ”CurrentStyle 对 象 


CurrentStyle 对 象 返回 所 有 样式 声明 (包括 内 部 、 外 部 和 内 联 》 按 CSS 层 县 规则 作用 
于 元 素 的 最 终 样式 ， 而 Style 对 象 只 返回 通过 标签 style 属性 应 用 到 元 素 的 内 联 样式 。 通 过 
CurrentStyle 对 象 获取 的 样式 值 可 能 与 通过 Style 对 象 获取 的 样式 值 不 同 。 例 如 对 段落 声明 
了 内 部 样式 : 

<style type="text/css"> 

p{color:red}; 

</style> 

对 一 个 具体 段落 而 言 ，style.color 不 能 返回 值 ， 而 currentStyle.color 将 返回 正确 的 值 。 
如 果 用 户 指 定 了 <p style="color:red">， 则 currentStyle.color 和 style.color 对 象 都 将 返回 值 
“red”。 

只 有 正和 Opera 浏览 器 支持 使 用 CurrentStyle 获取 元 素 计算 后 的 样式 ， 其 他 浏览 器 不 
支持 。 在 标准 浏览 器 中 使 用 getComputedStyle0 方 法 。 

getComputedStyle() 可 以 获取 当前 元 素 最 终 使 用 的 所 有 CSS 属性 值 , 返回 的 是 一 个 CSS 
样式 声明 对 象 ， 只 读 。 其 语法 如 下 : 


Var ostyle = window.getComputedstyle (element [,psevdo-element]) 


其 中 ， 第 1 个 参数 为 要 获取 计算 后 的 样式 的 目标 元 素 ， 第 2 个 参数 不 是 必需 的 (“如果 不 是 
“ 伪 类 ”， 应 设置 为 null 或 忽略 )。 

getComputedStyle() 与 style 的 主要 区 别 如 下 : 

(1) getComputedStyle0 是 只 读 的 ， 只 能 获取 样式 ， 不 能 设置 ，style 能 读 能 写 。 

(2) getComputedStyle() 获 取 的 是 最 终 应 用 在 元 素 上 的 所 有 CSS 属性 对 象 〈 即 使 没有 
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CSS 代码 )，style 只 能 获取 元 素 style 属性 中 的 CSS 样式 。 
于 不 同 浏览 器 对 CurrentStyle 对 象 的 支持 有 差异 , 所 以 在 使 用 CurrentStyle 对 象 时 要 
做 兼容 处 理 。 
圆 183 js(currentStyle).html， 说 明了 CurrentStyle 对 象 的 用 法 。 当 页 面 载 入 后 ， 单 击 
【段落 字体 】 按 钮 ， 将 弹出 消息 框 显示 段落 字体 大 小 。 
源 代码 如 下 : 
<head> 


<title>CurrentStyle 对 象 </title> 
<script> 


window.onload=function(){ 
document .getElementById ("btn1") .onclick=function(){ 
Var oP=document .getElementById ("pl1"); 
Var ocurrentstyle=null; 
if(oP.currentStyle){ // 兼 容 IE 浏览 器 
ocurrentstyle=oP.currentstyle; 
} 
else{ // 兼 容 FF 等 标准 浏览 器 
ocurrentstyle=window.getComputedstyle (oP,nul1) 
} 
alert (ocurrentstyle.fontsize); 
} 
} 
</script> 
<style type="text/css"> 
#pl{color:#F00; font-size:18px;} 
</style> 
</head> 
<body> 
<p id="p1l"> 这 是 一 些 文本 。</p> 
<input type="button" id="btnl"” value=" 段 落 字体 " /> 
</body> 


18.3.3 StyleSheet 对 象 


HTMLDocument 对 象 的 集合 StyleSheets 是 StyleSheet 对 象 的 集合 ， 每 个 StyleSheet 对 


用 的 属性 和 方法 。 
表 18.15 StyleSheet 对 象 常用 的 属性 和 方法 


属性 或 方法 描 述 


引用 mle 对 象 集合 ,包括 样式 表 定义 的 所 有 样式 规则 。 每 个 rule 对 象 


或 = 二 
OEP MY 有 两 个 属性 ， 其 中 selectorText 表示 选择 器 ，style 表示 样式 对 象 
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属性 或 方法 描 述 
引用 一 个 样式 对 象 ，cssText 属性 表示 样式 声明 
添加 样式 规则 。selector 是 选择 器 ，style 是 样式 声明 
插入 样式 规则 。rule 是 样式 规则 ，index 是 索引 号 


删除 指定 索引 号 的 样式 规则 


Style 
addRule(selector,style) 
insertRule(rule,index) (FF 兼容 ) 


TemoveRule(index) 


由 于 不 同 浏览 器 对 StyleSheet 对 和 象 的 支持 有 差异 ， 所 以 在 使 用 StyleSheet 对 象 时 要 做 
兼容 处 理 。 


来 自 网 页 的 消息 
A 人 以 下 2 条 样式 规则 


[而 18.4 js(StyleSheed) .html， 
说 明了 StyleSheet 对 象 常用 属性 和 
方法 的 使 用 。 当 页 面 载 入 后 ， 先 弹 

出 消息 框 ， 显 示 内 部 样式 表 的 样式 
视频 讲解 声明 ,如 图 18.4 所 示 。 单 击 【确定 】 
按钮 ， 页 面 显示 效果 如 图 18.5 所 示 ， 单 击 【大 字体 】 按 钮 ， 更 改 页 面 使 用 的 外 部 样式 表 ， 
如 图 18.6 所 示 。 


1 bhu {PONT-WEIGHT 
> A{TEXT-DECORATION: none} 


图 18.4 js(StyleSheet).html 消息 框 


清华 大 学 的 主页 地 址 是 http: /fw tsinghua. edu. cn/。 清华 大 学 的 主页 地 址 是 http://www. tsinghua. edu. cn/。 


小 宇 体 小 字体 ][ 大 字体 


图 18.5 js(StyleSheet).html 示意 图 1 图 18.6 js(StyleSheet).html 示意 图 2 


源 代码 如 下 : 


<head> 
<title>StyleSheet 对 象 </title> 
<style> 
.bhu{font-weight:900;} 
</style> 
<link id="sheet" rel="stylesheet" type="text/css" href="css/ stylesheet1l. 
cosh 
<script> 
window.onload=function(){ 
var oSytlesheet=document .styleSheets[0];  ”// 引 用 文档 的 第 1 个 样式 表 
if(oSytlesheet.rules){ // 兼 容 IE 
oSytlesheet .addRule ("a", "text-decoration:none;"); 
// 添 加 样式 规则 
var ssStr=" 本 页 面 第 1 个 样式 表 定 义 了 以 下 "+ oSytlesheet .rules.length + 
"条 样式 规则 : \n"; 
for (Var 1iCv=071iCVv<oSytleSheet .rules.length7ziCv++){ 
// 依 次 访问 每 个 样式 规则 
Var oRule=oSytleSheet.rules[iCv]; 
sStr+=oRule.selectorText+"{"+oRule.style.cssText+"}\n"; 


else{ // 兼 容 FF 
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Var sRule="a{text-decoration:none;}"; 
Var iIndex=oSytleSheet.cssRules.length; 
oSytlesheet .insertRule (sRule, iIndex); // 添 加 样式 规则 
var sstr=" 本 页 面 第 1 个 样式 表 定义 了 以 下 "+ oSytleSheet .cssRules.length 
+" 条 样式 规则 : \n"; 
for (var 1iCv=07;iCv<oSytleSheet .cssRules.length;ziCV++) 1{ 
// 依 次 访问 每 个 样式 规则 
Var oRule=oSytleSheet.cssRules[iCv]; 
SsStr+=oRule.selectorText+"{"+0Rule.style.cssText+"}\n"; 
1! 
} 
alert (sstr); 
document .getElementById("small") .onclick=function(){ 
document .getElementById("sheet") .href="css/stylesheetl .css";} 
document .getElementById ("big") .onclick=function(){ 
document .getElementById ("sheet") .href="css/stylesheet2.css";} 
} 
</script> 
</head> 
<body> 
<p><span class="bhu"> 清 华 大 学 </span> 的 主页 地 址 是 <a href="http://www. 
tsinghua.edu.cn/">http://www.tsinghua.edu.cn/</a>。 </p> 
<input type="button" id="small"” value=" 小 字体 " /><input type="button" 
id="big" value=" 大 字体 " /> 
</body> 


还 有 一 种 更 简便 的 方法 进行 样式 设置 ， 即 预先 定义 样式 ， 然 后 用 setAttribute() 方 法 添 
加 。 例 如 预先 声明 样式 .message。 


-message { 
Color: #FFFFFF; 
font-size: 1.2rem; 
padding-top: 95px; 
} 


然后 创建 新 的 元 素 或 在 原 有 元 素 的 基础 上 用 setAttribute0 设 置 属性 。 


Var h2 = document .createElement ('h2°'); 

h2 .textContent = "本 次 游戏 你 战胜 了 RI! "; 
h2.setAttribute ("class", "message"); 

document .getElementById('over') .appendchild(h2); 


18.4” 叮 呆 书店 首页 图 片 轮 播 广 告 的 实现 名 


本 节 在 叮 叮 书店 首页 添加 图 片 轮 播 广告 。 首 先 启动 WebStorm， 打 开 叮 叮 0 
书店 项 目 首页 index.html、 外 部 样式 表 文件 style.css 和 js 目录 下 的 mainjjs 脚本 文件 (在 第 
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17.5 节 建 立 )， 然 后 进行 如 1 
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下 操作 : 


@ 在 首页 添加 图 片 切换 广告 内 容 


进入 到 index.html 编辑 


区 ， 将 光标 定位 到 “<div id-"adv"> ”后 面 按 回 车 键 ， 输 入 下 面 


的 代码 , 其 中 用 定义 列表 的 标题 显示 4 个 超 链接 , 用 定义 列表 的 描述 显示 需要 切换 的 图 片 。 


<dl> 


<dt> <a href="#" id="al">1</a> <a href="#" id="a2">2</a> <a href= 


id="a3">3</a> <a href="#" id="a4">4</a> </dt> 
<dd> <a href="#"><img src="images/b-adl.jpg" id="banner" alt=" 广 告 " /></a> 


</dd> 
</d1l> 


@ 定义 样式 


切换 到 style.css 样式 文件 编辑 区 ， 定 义 样式 。 


/* 横 幅 广告 */ 


#adv {position:relative;margin-bottom: 0.5rem;} 

#adv dl, #adv dd {list-style:none;} 

#adv dt {position:absolute;bottom:10px;right:5px;display: flex;} 

#adv dd {overflow:hidden;} 

#adv dl dt a {display: flex;justify-content: center;align-items: center; 


width:24px; height:24px;padding:0 lpx lpx 0;border-radius:15px;margin-— 


eight SpX? 

background-color 

text-decoration: 
} 


上 @ 编号 脚本 程序 


:hsl (20,50%,30%); color:hsl(0,0%,100%); 
none; font-size:0.8rem; 


切换 到 main.js 脚本 文件 编辑 区 ， 在 main.js 里 添加 全 局 变量 。 


Var iCount=2; 


然后 在 mainjs 的 window.onload 事件 里 面 添加 如 下 程序 。 


if (document .getElementById("al") !=null){ 
document .getElementById("al") .onclick = function(){ 


icount=1; 


changebgcolor (iCount);} 


} 


if (document .getElementById("a2") !=null){ 
document .getElementById("a2") .onclick = function(){ 


iCount=2; 


changebgcolor (iCount);} 


} 


if (document .getElementById ("a3") !=nul1)1{ 
document .getElementById("a3") .onclick = function(){ 


iCount=3; 


| 374 


第 18 章 


changebgcolor (iCount);} 

} 

if(document .getElementById("a4") !=nul1)1{ 

document .getElementById("a4") .onclick = function(){ 

iCount=4; 
changebgcolor (iCount);} 

} 

Var iCarouselid = window.setInterval ("carousel()", 2000); 


最 后 在 mainjs 后 面 添 加 carousel0 和 changebgcolor(INum) 函 数 ， 效 果 如 图 18.7 所 示 。 


叮 叮 书店 


书籍 分 类 特刊 降价 联系 我 们 关于 我 们 


久负盛名 的 
Python 入 门 经典 畅 销 书 


快速 入 行 前 六 
中 文 版 出 版 以 来 ， 成 就 开发 高 手 


累计 销量 超 20 万 册 ! \ 


i 


针对 Python 3 重 磅 升级 


图 18.7 ” 叮 叮 书店 首页 图 片 切换 广告 示意 图 


function carousel(){ 
Var sImgSrc=eval("'images/b-ad'+iCount.tostring()+' .jpg'"); 
Var sAchange=eval("'a'+iCount.tostring()"); 
/* 记 录 需 要 变 回 颜色 的 链接 顺序 */ 
var iA=iCount-1; 
if (iA==0) {iA=4;} 
Var sArestore=eval("'a'+iA.tostring()"); 


document .getElementById ("banner") .src=sImgSrc; 

document .getElementById(sAchange) .style.backgroundColor="hs]l (20, 30%, 
50%)"™; 

document .getElementById(sArestore) .style.backgroundColor="hsl (20, 
50%,30%)"; 

iCount=iCount+17 


if(iCount==5) {iCount=1;} 


function changebgcolor (iNum){ 


document .getElementById ("banner") .src=eval ("'images/b-ad'+iNum. 
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tostring()+'.jpg'"); 
for (Var iC=1;iC<=4;iC++){ 
Var sA=eval("'a'+iC.tostring()"); 
if (iC==iNum) 
{ 
document .getElementById (SA) .style.backgroundColor="hsl 
(20,30%, 50%)"™; 
= 
else 
人 
document .getElementById (SA) .style.backgroundColor="hsl1 (20, 
50%,30%)"™; 


18.5 ”小结 


本 章 简要 介绍 了 DOM 的 概念 和 基本 构成 ， 详 细 介 绍 了 DOM 基本 对 象 ， 探 讨 了 使 用 
DOM 对 象 对 CSS 进行 操作 的 方法 ， 最 后 介绍 了 叮 叮 书店 首页 图 片 切 换 广 告 的 实现 过 程 。 


18.6 习题 


@ 选择 题 

(1) 下 列 不 属于 访问 指定 节点 的 方法 的 是 )s 
A. obj.value B. getElementByTagName 
C. getElementByName D. getElementById 


(2) 在 JavaScript 中 ， 关 于 Document 对 象 的 方法 下 列 说 法 中 正确 的 是 ( )。 
A.，getElementById() 是 通过 元 素 ID 获得 元 素 对 象 ， 返 回 值 为 单个 对 象 
B. getElementByName() 是 通过 元 素 name 获得 元 素 对 象 ， 返 回 值 为 单个 对 象 
C. getElementById0 是 通过 元 素 ID 获得 元 素 对 象 ， 返 回 值 为 对 象 组 
D. getElementByName() 是 通过 元 素 name 获得 元 素 对 象 ， 返 回 值 为 单个 对 象 
(3) 对 于 下 面 的 标签 ，document.getElementById("info").innerHTML 语句 返回 的 值 是 
( )。 


<div id="info" style="display .block"><p> 请 填写 </p></div> 
A. 请 填写 
B. <p> 请 填写 </p> 
C. 1id="info" style="display.block" 
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<div id="info" style="display.block"><p> 请 填写 </p> 


(4) CSS 样式 的 属性 名 为 background-image， 对 应 的 Style 对 象 的 属性 名 是 Ys 


A. 
Cs 


background B. backgroungImage 
Image D. background-image 


(5) 如 果 在 页 面 中 包含 以 下 图 片 标签 ， 则 下 列 选 项 中 的 〈 ) 语句 能 够 实现 隐藏 该 


图 片 的 功能 。 


<img id="pic" src="Sunset.jpg" width="400" height="300" /> 


A 
B. 
LG 


D. 


. document.getElementById("pic").style.display="visible"; 


document.getElementById("pic").style.display="enabled"; 


. document.getElementById("pic").style.display="block"; 


document.getElementById("pic").style.display="none"; 


四 简 答 题 

(1) 简 述 DOM 树 的 层次 结构 。 

(2) 元 素 的 节点 类 型 有 哪些 ? 

(3) 有 哪些 方法 通过 DOM 访问 HTML 文档 中 的 节点 ? 

(4) Style 对 象 、CurrentStyle 对 象 和 StyleSheet 对 象 有 什么 区 别 ? 
(5) CSS 样式 的 属性 名 和 对 应 的 Style 对 象 的 属性 名 有 什么 区 别 ? 
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HTML DOM 是 针对 HTML 的 文档 对 象 模型 , 定义 了 针对 HTML 的 标准 对 象 集合 以 及 
访问 和 操作 HTML 文 档 的 方法 ,HTML DOM 是 一 个 W3C 的 标准 .本 章 首先 详细 介绍 HIML 
文档 常用 的 DOM 对 象 ， 然 后 讨论 如 何 正确 使 用 ECMAScript 的 正则 表达 式 ， 最 后 详细 介 
绍 叮 叮 书店 “联系 我 们 ”页 面 表单 验 证 的 整个 实现 过 程 。 

本 章 要 点 : 

如 HTML DOM 对 象 。 

个 正则 表达 式 。 


19.1 HTML DOM 对 象 


通过 元 素 节 点 方式 对 元 素 进行 访问 控制 是 一 种 通用 的 方法 ， 更 多 的 时 候 是 通过 HIML 
DOM 对 象 对 特定 元 素 进 行 访问 控制 。 
在 HIML 文档 载 入 时 ， 浏 览 器 解释 其 代码 ， 当 直到 自身 支持 的 HTML 元 素 对 象 对 应 
的 标签 时 ， 就 按 HTML 文档 载 入 的 顺序 在 内 存 中 创建 这 些 对 象 ， 而 不 管 JavaScript 脚本 是 
和 否 真正 运行 这 些 对 象 。 在 对 象 创建 后 ， 浏 览 器 为 这 些 对 象 定义 了 属性 和 方法 ， 通 过 这 些 属 
性 和 方法 , 使 用 JavaScript 脚本 就 能 动态 操作 HIML 文档 内 容 。 表 19.1 列 出 了 HIML DOM 
对 象 。 


表 19.1 HTML DOM 对 象 表 


整个 HIML 文档 ， 可 用 来 访问 页 面 中 的 所 有 元 素 
Anchor <a> 元 素 


Area <area> 元 素 
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续 表 
对 和 象 描 述 
Base <base> 元 素 
Body <body> 元 素 
Button <button> 元 素 
Event 某 个 事件 的 状态 
Form <form> 元 素 
Image <img> 元 素 
Input button 表单 中 的 按钮 
Input checkbox 表单 中 的 复 选 框 
Input file 表单 中 的 文件 上 传 
Input hidden 表单 
Input password 表单 中 的 密码 域 
Input radio 表单 中 的 单 选 按钮 
Input reset 表单 中 的 重 置 按钮 
Input submit 表单 中 的 确认 按钮 
Input text 表单 中 的 文本 输入 域 (文本 框 
Link <link> 元 素 
Meta <meta> 元 素 
Object <object> 元 素 
Option <option> 元 素 
Select 表单 中 的 选择 列表 
Style 单独 的 样式 声明 
Table <table> 元 素 
TableData <td> 元 素 
TableRow <tr> 元 素 
Textarea <textarea> 元 素 


19.1.1 Document 对 象 


每 个 载 入 浏览 器 的 HTML 文档 都 会 成 为 Document 对 象 - Document 对 象 是 Window 对 
象 的 一 部 分 ， 可 通过 window.document 属性 对 其 进行 访问 。 
@ Document 对 象 集合 
表 19.2 列 出 了 常用 Document 对 象 集合 。 
表 19.2 Document 对 象 集合 


集 合 描 述 

anchors[] 文档 中 的 所 有 Anchor 对 象 
forms[] 文档 中 的 所 有 Form 对 象 
images[] 文档 中 的 所 有 Image 对 象 
links[] 文档 中 的 所 有 Area 和 Link 对 象 
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四 Document 对 象 的 属性 
表 19.3 列 出 了 常用 Document 对 象 属性 。 


表 19.3 Document 对 象 属性 


属 性 描述 

domain 当前 文档 的 域名 
title 当前 文档 的 标题 
url 当前 文档 的 URL 


全 Document 对 象 的 方法 
表 19.4 列 出 了 常用 Document 对 象 方法 。 
表 19.4 Document 对 象 方法 
太 ” .法 描 述 

close0) 关闭 用 open0 方 法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
该 方法 将 控 除 当前 HTML 文档 的 内 容 ， 开 始 一 个 新 的 文档 ， 新 文档 用 
write() 方 法 或 writeln0 方 法 编写 。mimetype 可 选 ， 规 定 正 在 写 的 文档 类 
型 ， 默 认 值 是 text/html。replace 可 选 ， 若 选 可 引起 新 文档 从 父 文档 继承 
历史 条 目 
向 文档 写 入 HTML 表达 式 或 JavaScript 代码 
同 write0 方 法 ， 不 同 的 是 后 加 一 个 换行 符 


open(mimetype:replace) 


write(expl,exp2,exp3,…) 


writeln(expl,exp2.exp3,…) 


法 的 使 用 。 
源 代码 如 下 : 


<head> 
<title>Document 对 象 </title> 视频 讲解 
<script> 
window.onload=function(){ 
document .getElementById ("myHeader") .onclick=function(){ 
getValue ();} 


1 
function getValue () { 
Var oEmyHeader=document .getElementById ("myHeader"); 
alert (ogmyHeader .firstChild.nodeValue);} 
</script> 
</head> 
<body> 
<script> 
document .write ("<h3> 大 家 好 !</h3>") 
</script> 
<span> 文 档 标题 :</span> 
<script> 
document .write (document .title+"<br />"); 
</acript> 
<span> 文 档 URL: </span> 
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<script> 

document .write (decodeURI (document .URL)+"<br />"); 
</script> 

<span> 文 档 域 名 : </span> 

<script> 


document .write (document .domain+"<br />"); 
</script> 

<h3 id="myHeader"> 这 是 标题 ， 单 击 试 一 下 </h3> 

<a name="first" id="first"> 第 1 个 锚 </a><br /> 
second" id="second"> 第 2 个 锚 </a><br /> 
third" id="third"> 第 3 个 锚 </a><br /> 
<span> 文 档 中 锚 的 数 : </span> 

<script> 

document .write (document .anchors.length+"<br />"); 


</script> 
<span> 文 档 第 1 个 锚 InnerHTML 是 : </span> 
<script> 
document .write (document .anchors [0] .innerHTML+"<br />"); 
</script> 
<form id="Form]l" name="Form]l"></form> 
<form id="Form2" name="Form2"></form> 
<form id="Form3" name="Form3"></form> 
<script> 
document .write ("文档 包含 " + document .forms.length + "个 表单 。"+"<br />"); 
</script> 
<form id="Form4" name="Form4"> 
<label1> 姓 名 : </1label><input type="text" /> 
</form> 
<script> 
document .write ("第 1 个 表单 名 称 是 : " + document .forms [0] .name+" "); 
document .write ("第 1 个 表单 名 称 是 :" + document .getElementById ("Forml") .name); 
</script> 
</body> 


19.1.2 Image 对 象 


Image 对 象 表示 嵌入 的 图 像 。<img> 标 签 每 出 现 一 次 ， 一 个 Image 对 象 就 会 被 创建 。 

表 19.5 列 出 了 常用 Image 对 象 属性 。 
表 19.5 Image 对 象 属性 
描 述 
无 法 显示 图 像 时 的 替代 文本 


描 述 
isMap 是 否 为 服务 器 端的 图 像 映射 


border 图 像 边 框 name 图 像 名 称 
height | 图 像 高 度 src 图 像 URL 
id 图 像 id width 图 像 宽度 
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[ 贺 19. js(Image).html， 说 明了 Image 对 象 主要 属性 的 使 用 ， 如 图 19.1 所 示 。 单 击 


【更 换 图 像 】 按 钮 ， 图 像 换 成 另 一 个 ， 如 图 19.2 所 示 。 


图 19.1 js(Image).html 示意 图 1 图 19.2 js(Image).html 示意 图 2 
源 代码 如 下 : 
<head> 
<title>Image 对 象 </title> 
<script> 
window.onload=function(){ 
document .getElementById ("btn1") .onclick=function() {changeSize();} 
document .getElementById ("btn2") .onclick=function() {changesrc ();} 
} 
function changesize(){ 
document .getElementById ("about") .height="31"; 
document .getElementById ("about") .width="88"; 
} 
function changesrc(){ 
document .getElementById ("about") .src="images/valid-HTML10 .png"; 
} 
</script> 
</head> 
<body> 
<img id="about" src="images/about.gif" alt="" /> <br /> 
<input type="button" id="btnl" value=" 改 变 图 像 大 小 " /><br /> 
<input type="button" id="btn2" value=" 更 换 图 像 " /> 
</body> 


19.1.3 Anchor 对 象 


Anchor 对 象 表示 超 链 接 。 在 文档 中 <a> 标 签 每 出 现 一 次 ， 就 会 创建 Anchor 对 象 。 


表 19.6 列 出 了 常用 Anchor 对 象 属性 。 


由 


贺 19.3 js(Anchon html， 说 明了 Anchor 对 象 的 主要 属性 的 使 用 ， 如 图 19.3 所 示 。 
击 【 改 变 链 接 】 按 钮 ， 链 接 换 成 “清华 大 学 ” 如 图 19.4 所 示 。 
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表 19.6 ”Anchor 对 象 属性 


属 性 描 述 描 述 
href 链接 资源 的 URL 当前 文档 与 目标 URL 之 间 的 关系 
id 链接 的 id 在 何 处 打开 链接 
innerHTML | 链接 的 内 容 链接 资源 的 MIME 类 型 
name 链接 名 称 
清华 大 学 
图 19.3 js(Anchor).html 示意 图 1 图 19.4 js(Anchor).html 示意 图 2 


源 代码 如 下 : 
<head> 
<title>Anchor 对 象 </title> 
<script> 
window.onload=function (){ 
document .getElementById ("btn1") .onclick=function() {changeLink ();} 
} 
function changeLink(){ 
document .getElementById('myAnchor') .innerHTML=" 清 华 大 学 "; 
document .getElementById('myAnchor') .href=" http://www.tsinghua. 
edu.cn/™; 
document .getElementById('myAnchor') .target=" blank"; 
} 
</script> 
</head> 
<body> 
<a id="myAnchor" href="http://www.microsoft.com/">Microsoft</a> <br /> 
<input type="button" id="btnl" onclick="changeLink()" value=" 改 变 链接 " /> 
</body> 


19.1.4 ” ”Event 对象 


Event 对 象 表示 事件 的 状态 ， 比 如 事件 触发 的 元 素 、 键 盘 按键 的 状态 、 鼠 标的 位 置 和 
鼠标 按钮 的 状态 等 。 

@ Event 对 象 的 标准 属性 

表 19.7 列 出 了 Event 对 象 的 标准 属性 。 


表 19.7 Event 对 象 的 标准 属性 


属 性 描述 


target | 返回 触发 此 事件 的 元 素 〈 事 件 的 目标 节点 ) 


返回 一 个 时 间 戳 ， 指 示 发 生 事件 的 日 期 和 时 间 (从 epoch 开始 的 毫秒 数 ) 。epoch 
是 一 个 事件 参考 点 ， 一 般 是 客户 机 启动 的 时 间 
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属 性 描述 
type | 返回 当前 Event 对 象 表示 的 事件 的 名 称 


返回 布尔 值 ， 指 示 事 件 是 否 为 起 泡 事件 类 型 ， 如 果 事件 是 起 泡 类 型 ， 则 返回 true， 
否则 返回 false 


返回 布尔 值 ， 指 示 事 件 是 否 拥有 可 取消 的 默认 动作 , 如果 用 preventDefault0 方 法 可 
以 取消 与 事件 关联 的 默认 动作 ， 则 为 tme， 否 则 为 fasle 


cancelable 


currentTarget | 返回 其 事件 监听 器 触发 该 事件 的 元 素 ， 即 当前 处 理 该 事件 的 元 素 、 文 档 或 窗口 


eventPhase 返回 事件 传播 的 当前 阶段 ， 即 捕获 阶段 、 正 常事 件 派 发 和 起 泡 阶段 


四 Event 对 象 的 标准 方法 
表 19.8 列 出 了 Event 对 象 的 标准 方法 。 


表 19.8 Event 对 象 的 标准 方法 

描述 
初始 化 新 创建 的 Event 对 象 的 属性 。eventType 为 事件 的 类 
型 ，canBubble 为 事件 是 否 起 泡 ，cancelable 为 是 否 可 以 用 
preventDefault(0 方 法 取消 事件 


initEvent(eventType,canBubble,cancelable) 


preventDefault() 通知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 
E 不 再 派发 事件 ， 终 止 事件 在 传播 过 程 中 的 捕获 、 目 标 处 理 
stopPropagation() 或 起 泡 阶段 的 进一步 传播 
@ 鼠标 /键盘 属性 


表 19.9 列 出 了 Event 对 象 的 鼠标 /键盘 属性 。 
表 19.9 Event 对 象 的 鼠标 /键盘 属性 


属 性 描 述 

altKey 返回 当 事 件 被 触发 时 Alt 键 是 否 被 按 下 ， 返 回 一 个 布尔 什 
a 返回 当 事 件 被 触发 时 哪个 鼠标 按钮 被 单 击 。 左 键 是 0， 中 键 是 1， 右键 是 2。 在 正 

里 左 键 是 1， 中 键 是 4， 右 键 是 2 

clientX 返回 当 事 件 被 触发 时 鼠标 指针 的 水 平 坐标 

clientY 返回 当 事 件 被 乔 发 时 鼠标 指针 的 垂直 坐标 

ctriKey 返回 当 事 件 被 触发 时 Ctrl 键 是 否 被 按 下 ， 返 回 一 个 布尔 值 
screenX 返回 当 事 件 被 触发 时 鼠标 指针 的 水 平 坐 标 〔 相 对 于 屏幕 ) 
ScreenY 返回 当 事 件 被 触发 时 鼠标 指针 的 乖 直 举 标 (相对 于 屏幕 ) 
shifiKey 返回 当 事 件 被 触发 时 Shift 键 是 否 被 按 下 ， 返 回 一 个 布尔 值 
四 正 必 性 


除了 上 面 的 鼠标 /键盘 事件 属性 ， 正 浏览 器 还 支持 表 19.10 列 出 的 属性 。 
表 19.10 Event 对 象 的 IE 属性 


属 性 描 述 
keyCode 对 于 keypress 事件 ， 该 属性 声明 了 被 按 的 键 的 Unicode 字符 码 。 对 于 keydown 和 
keyup 事件 ， 该 属性 声明 了 被 按 的 键 的 虚拟 键盘 码 
offsetX,offsetY 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 x 坐标 和 yy 坐标 
srcElement 对 于 生成 事件 的 Window 对 象 、Document 对 象 或 Element 对 象 的 引用 
toElement 对 于 mouseover 和 mouseout 事件 ， 该 属性 引用 移入 鼠标 的 元 素 
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[ 夯 ]19.4 js(Event).html， 使 用 了 Event 对 象 a 
的 主要 属性 ， 在 文档 中 单 击 ， 消 息 框 会 提示 单 击 ee 


ientX 坐 标 :214, clientY 坐 标 :217 


了 鼠标 的 哪个 按键 ， 以 及 事件 源 、 事 件 名 称 和 鼠 人 


Ei 


标 指针 在 浏览 器 窗口 与 屏幕 中 的 坐标 ， 如 图 19.5 A 
所 示 。 视频 讲解 
源 代码 如 下 : 图 19.5 js(Event).html 消息 框 
<head> 
<title>Event 对 象 </title> 
<script> 


window.onload=function (){ 
document .documentElement .onmousedown=function (event){ 

if (window.event){ //IE 对 事件 对 象 的 引用 必须 用 Window 对 象 
iClientX=window.event.clientx; 
iClientY=window.event.clientYy; 
iScreenX=window.event .screenx; 
iScreenY=window.event .screenYy; 
Var ssStr=""; 
if (window.event .button==2) {sStr=" 单 击 了 鼠标 右键 ! \n";} 
else{sStr=" 单 击 了 鼠标 左 键 ! \n";} 
sStr+=" 事 件 源 : "+window.event .srcElement+"\n"+" 事 件 名 称 : "+window. 
event .type+"\n"+"clientx 举 标 :" + icClientX + "vclientY 坐 标 :"” + 
iCclientY+"\nscreenx 坐标 :"+iScreenX+", screenY 坐标 :"” + iscreenY; 
alert (sstr); 

} 

elsef 
iClientx=event.clientx; 
iClientY=event.clientyYy; 
iScreenx=event .screenx; 
iScreenY=event .screenYy; 
Var sstr=""; 
if (event.button==2) {sStr=" 单 击 了 鼠标 右键 ! \n";} 
else{sStr=" 单 击 了 鼠标 左 键 ! \n";} 
sstr+=" 事 件 源 : "+event .target+"\n"+" 事 件 名 称 : "+event .type+"\n"+ 
"clientx 坐标 :" + iClientX + ",clientY 坐标 :" + iclientY+"XnscreenX 坐 
标 :"+iScreenX+", screenY 坐标 :" + iscreenY; 
alert (sstr); 


} 

</script> 

</head> 

<body> 

<p> 在 文档 中 单 击 。</p> 
</body> 
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@ 事件 传播 

当 事 件 发 生 在 某 个 文档 节点 上 时 《 即 事件 目标 )， 目 标的 事件 处 理 程序 就 会 被 触发 。 
此 外 ， 目 标的 每 个 祖先 节点 也 有 机 会 处 理 该 事件 。 

DOM 事件 传播 包含 以 下 3 个 阶段 : 

第 一 ， 捕 获 阶段 (capturing)， 事 件 从 顶级 文档 树 节点 一 级 一 级 向 下 遍历 ， 直 到 到 达 该 
事件 的 目标 节点 。 


第 二 ， 到 达 事 件 的 目标 节点 ， 执 行 目标 节点 的 时 间 处 理 程序 。 
第 三 ， 起 泡 阶段 (bubbling)， 事 件 从 目标 节点 一 级 一 级 向 上 上 溯 ， 直 到 顶级 文档 树 
节点 。 


捕获 阶段 的 事件 流 处 理 是 从 DOM 层次 的 根 开始 , 而 不 是 从 触发 事件 的 目标 元 素 开始 ， 
事件 被 从 目标 元 素 的 所 有 祖先 元 素 依 次 往 下 传递 。 在 这 个 过 程 中 ， 事 件 会 被 从 文档 根 到 事 
件 目标 元 素 之 间 的 各 个 继承 派生 的 元 素 所 捕获 (特殊 设 定 除外 )， 直 到 目标 元 素 。 事件 到 达 
目标 元 素 后 ， 会 接着 通过 DOM 节点 再 进行 起 泡 。 

起 泡 阶 段 的 事件 流 处 理 是 当 事 件 在 某 一 DOM 元 素 被 触发 时 事件 将 跟随 着 该 节点 继承 
的 各 个 父 节 点 起 泡 穿 过 整个 DOM 节点 层次 ， 直 到 到 达 文 档 根 。 在 起 泡 过 程 中 的 任何 时 候 
都 可 以 终止 事件 的 起 泡 ， 在 符合 W3C 标准 的 浏览 器 里 可 以 通过 调用 事件 对 象 上 的 
stopPropagation() 方 法 终止 ， 在 正 里 可 以 通过 设置 事件 对 象 的 cancelBubble 属性 为 true 来 

大 多 数 浏览 器 都 遵循 这 两 种 事件 流 方 式 。 在 默认 情况 下 ， 事 件 使 用 起” 肯 跨 总 沿 
泡 事件 流 ， 不 使 用 捕获 事件 流 。 

项 19.5 js(Event-bubbling1).html， 说 明了 Event 对 象 的 起 泡 事件 流 ， 
通过 弹出 消息 框 的 顺序 可 以 知道 事件 从 目标 节点 一 级 一 级 向 上 上 漳 。 

源 代码 如 下 : 

<head> 


<title> 起 泡 事 件 流 </title> 
<script> 


视频 讲解 


window.onload=function() { 
window.onclick=function(){ 
alert ("window"); 
} 
document .onclick=function(){ 
alert ("document"); 
} 
document .getElementById ("form") .onclick=function(){ 
alert ("form"); 
E 
document .getElementById ("button") .onclick=function(){ 
alert ("button™"); 
| 
上 
</script> 
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</head> 
<body> 
<form id="form"> 
<input type="button" value="button" id="button"> 
</form> 
</body> 


[而 ]19.6 js(Event-bubbling2).html， 调 用 Event 对 象 的 stopPropagation() 方 法 终止 事件 
的 起 泡 。 
源 代码 如 下 : 
<head> 
<title> 起 泡 阻 止 </title> 
<style> 
#form{width: 200px; height: 100px; border: solid lpx #0000FF;} 
</style> 
<script> 


window.onload=function() { 
window.onclick=function (event){ 
event .stopPropagation(); 
alert ("window"); 
} 
document .onclick=function (event){ 
event .stopPropagation(); 
alert ("document"); 
} 
document .getElementById ("form") .onclick=function (event){ 
event .stopPropagation (); 
alert ("form"); 
} 
document .getElementById ("button") .onclick=function(){ 
alert ("button"); 


} 

</script> 
</head> 
<body> 
<form id="form"> 

<input type="button" value="button" id="button"> 
</form> 
</body> 


©@ HTML DOM EventListener 


使 用 window.onclick=function( {alert("window"):} 方 式 只 能 给 元 素 事件 绑 定 一 个 处 理 行 
为 ， 但 在 很 多 时 候 需 要 绑 定 多 个 处 理 行为 到 元 素 的 一 个 事件 上 ， 而 且 还 可 能 要 动态 地 增 / 
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删 元 素 的 某 个 事件 处 理 行为 ， 这 时 要 用 到 HTML DOM 的 addEventListener() 方 法 和 
removeEventListener() 方 法 。 

addEventListener() 方 法 用 于 向 指定 元 素 添加 事件 行为 ， 所 添加 的 事件 行为 不 会 覆盖 已 
存在 的 事件 行为 。 用 户 可 以 向 一 个 元 素 添加 多 个 事件 行为 ， 也 可 以 向 一 个 元 素 添加 多 个 同 
类 型 的 事件 行为 ， 例 如 两 个 “click” 事 件 。 用 户 可 以 向 任何 DOM 对 象 添 加 事件 行为 ， 而 
不 仅仅 是 HTML 元 素 ， 例 如 window 对 象 。 其 语法 如 下 : 


element .addEventListener (event, function,useCapture); 


第 1 个 参数 是 事件 的 类 型 (例如 “click” 或 “mousedown”); 第 2 个 参数 是 事件 触发 
后 调用 的 函数 ; 第 3 个 参数 是 个 布尔 值 ， 用 于 描述 事件 是 冒 泡 还 是 捕获 ， 该 参数 是 可 选 的 ， 
默认 值 为 false， 即 起 泡 传 递 ， 当 值 为 tue 时 ， 事 件 使 用 捕获 传递 。 

例如 当 用 户 重 置 窗口 大 小 时 添加 事件 行为 : 

window.addEventListener ("resize", function(){ 

document .getElementById ("demo") .innerHTML=" 您 正在 调整 窗口 大 小 "; 

1); 

提示 : 在 事件 类 型 前 不 要 使 用 “on” 前 级 ， 例 如 使 用 “click”， 而 不 是 “onclick”。 

removeEventListener() 方 法 可 以 移 除 由 addEventListener() 方 法 添加 的 事件 行为 。 其 语法 
如 下 : 


element .removeEventListener (event, function,useCapture); 


19.1.5 Checkbox 和 Radio 对 象 


Checkbox 对 象 表示 表单 中 的 复 选 框 , 复 选 框 表示 在 一 组 选择 框 中 可 以 不 选 或 任 选 。 在 
文档 中 <input type="checkbox"> 每 出 现 一 次 ，Checkbox 对 象 就 会 被 创建 。 

Radio 对 象 表示 表单 中 的 单 选 按钮 。<input type="radio"> 每 出 现 一 次 ， 一 个 Radio 对 象 
就 会 被 创建 。 单 选 按钮 表示 一 组 互 斥 选项 按钮 中 的 一 个 ， 当 一 个 按钮 被 选中 时 ， 之 前 选中 
的 按钮 就 变 为 非 选中 。 

@ Checkbox 和 Radio 对 象 的 属性 

表 19.11 列 出 了 Checkbox 和 Radio 对 象 的 属性 。 


表 19.11 Checkbox 和 Radio 对 象 的 属性 


属 性 描述 
checked Checkbox、Radio 是 否 应 被 选中 
defaultChecked Checkbox、Radio 属性 的 默认 值 
disabled Checkbox、Radio 是 否 被 禁用 
form 包含 Checkbox、Radio 的 表单 
id Checkbox、Radio 的 id 
name Checkbox、Radio 的 名 称 
type Checkbox、Radio 的 表单 元 素 类 型 
value Checkbox、Radio 的 value 属性 值 
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人 Checkbox 和 Radio 对 象 的 方法 
表 19.12 列 出 了 Checkbox 和 Radio 对 象 的 方法 ， 很 多 表单 元 素 都 有 这 些 方法 。 
表 19.12 Checkbox 和 Radio 对 象 的 方法 
方 法 描 述 ; 描 述 
blur0 从 元 素 上 移 开 焦点 元 素 获 得 焦点 
clickO 


[ 圆 19.7 js(Checkbox) html， 说 明了 Checkbox 
对 象 的 主要 属性 和 方法 的 使 用 。 选 中 两 个 复 选 框 , 单 
击 【 确 定 】 按 钮 ， 在 文本 框 中 显示 选中 的 结果 ， 如 
图 19.6 所 示 。 

源 代码 如 下 : 

<head> 


<title>Checkbox 对 象 </title> 
<script> 


选择 你 的 爱好 : 
网 络 回 数据 库 口 编程 


window.onload=function(){ 
document .getElementById ("btn") .onclick=function(){ 视频 讲解 
createorder ();} 
} 
function createorder (){ 
aInterest=document .forms [0] .interest; 
ssStr=""; 
for (iCv=0;iCv<aInterest.length;iCv++){ 
if (aInterest[iCv] .checked) { 
sstr+=aInterest[iCv] .value + " "; 
} 
document .getElementById ("interest") .value=" 你 的 爱好 有 : " + sstr; 
} 
</script> 
</head> 
<body> 
<form> 
<label class="contact"><strong> 选 择 你 的 爱好 :</strong></label> <br /> 
<label> 网 络 </label> 
<input type="checkbox" name="interest" value=" 网 络 " id="interest 0" /> 
<labe1> 数 据 库 </1labe1l> 
<input type="checkbox" name="interest" value=" 数 据 库 " id="interest 1" /> 
<label1> 编 程 </label> 
<input type="checkbox" name="interest" value=" 编 程 " id="interest 2" /> 
<pr /> 
<input type="button" id="btn" value=" 确 定 " /><br /> 
<input type="text" id="interest" size="28" /> 
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</form> 
</body> 


贺 19.8 js(Radio).html， 说 明了 你 喜欢 哪 款 浏览 器 ? 
Radio 对 象 的 主要 属性 和 方法 的 使 用 。 | 8 cee re” 
单 击 任 一 单 选 按钮 ， 在 文本 框 中 显示 选 | 2 Seem 


© Opera 
中 的 浏览 器 ， 如 图 19.7 所 示 。 你 喜欢 的 浏览 器 是 ， [Firefox | 
视频 讲解 涛 代码 
源 代码 如 下 : 图 19.7 js(Radio).html 示意 图 
<head> 
<title>Radio 对 象 </title> 
<script> 


window.onload=function(){ 


document .getElementById ("browserl") .onclick=function(){ 
check (this.value);} 

document .getElementById ("browser2") .onclick=function(){ 
check (this.value);} 

document .getElementById ("browser3") .onclick=function(){ 
check (this.value);} 

document .getElementById ("browser4") .onclick=function(){ 
check (this.value);} 

} 


function check (browser) { 


document .getElementById ("answer") .value=browser;} 


</script> 
</head> 
<body> 
<form> 


<labe1> 你 喜欢 哪 款 浏览 器 ? </1labe1l> 

<br /> 

<input type="radio" name="browser" id="browserl" value="Internet 
Explorer" /> 

Internet Explorer<br /> 

<input type="radio" name="browser" id="browser2" value="Firefox" /> 
Firefox<br /> 

<input type="radio" name="browser" id="browser3" value="Chrome" /> 
Chrome<br /> 

<input type="radio" name="browser" id="browser4" value="Opera" />Opera<br /> 
<labe1> 你 喜欢 的 浏览 器 是 : </1abel> 

<input type="text" id="answer" size="]16" /> 


</form> 
</body> 


19.1.6 ”FileUpload 对 象 


在 文档 中 <input type="file"> 每 出 现 一 次 ，FileUpload 对 象 就 会 被 创建 。 该 对 象 包含 一 
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个 文本 输入 字段 ， 用 来 输入 上 传 的 文件 名 ,还 有 一 个 按钮 ， 用 来 打开 文件 选择 对 话 框 选择 
文件 ， 

为 了 安全 ，FileUpload 不 允许 指定 默认 文件 名 ，value 属性 是 只 读 的 ， 只 有 用 户 可 以 输 
入 文件 名 ，value 属性 保存 了 用 户 选择 文件 的 名 称 。 当 用 户 选 择 或 编辑 一 个 文件 名 时 ， 
FileUpload 对 和 象 会 触发 onchange 事件 。 

提示 : FileUpload 对 象 只 是 选择 上 传 文件 的 文件 名 ， 当 提交 表单 时 并 没有 提供 可 以 上 
传 文件 或 数据 的 方法 ， 需 要 另外 处 理 。 

表 19.13 列 出 了 FileUpload 对 象 的 属性 。 

表 19.13 FileUpload 对 象 的 属性 


属 性 描 述 
accept 传输 文件 的 MIME 类 型 列表 (用 逗号 分 隔 ) 
disabled 是 否 禁 用 FileUpload 对 象 
form 包含 FileUpload 对 象 的 表单 
id FileUpload 对 象 的 id 
name FileUpload 对 象 的 名 称 
type 表单 元 素 类 型 。 对 于 FileUpload 是 "file" 
value FileUpload 对 象 的 文件 名 


[项 19.9 js(FileUpload).html, 说 明了 FileUpload 对 象 的 主要 属性 和 方法 的 使 用 。 在 这 
个 例子 中 , 如果 上 传 的 文件 不 是 jpg 格式 的 图 像 文 
件 会 给 予 提示 ， 如 图 19.8 所 示 。 


只 能 上 传 jpe 贴 式 图 爸 文 件 4 

源 代码 如 下 : 

<head> 

<title>FileUpload 对 象 </title> 
<script> 

ORG 图 19.8 js(FileUpload) html 示意 图 


document .getElementById("filel") . 
onchange=function(){ 
checkfiletype();} 
} 
function checkfiletype (){ 
var oEfilel=new String (document .getElementById ("filel") .value); 
Var sxe=oEfilel.substring (oEfilel.lastIndexOf (".")+1); 
if (sXe!="jpg" &é& sXe!="JPEG" && sXe!="jpeg" && sXe!="JPEG"){ 
alert ("只 能 上 传 jpg 格式 图 像 文件 ! "); 
} 
elset 
document .getElementById("filel") .accept="image/jpeg"; 
document .write ("文件 上 传 中 "); 
. 
} 
</script> 
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</head> 
<body> 
<form> 
<labe1> 选 择 文件 : </label><input type="file" id="filel" /> 
</form> 
</body> 


19.1.7 Text 和 Password 对 象 


Text 对 象 表示 表单 中 的 文本 输入 域 。 在 表单 中 <input type="text"> 每 出 现 一 次 ，Text 对 
象 就 会 被 创建 。 该 元 素 可 创建 一 个 单行 的 文本 输入 字段 ， 当 用 户 编辑 文本 并 把 焦点 转移 到 
其 他 元 素 的 时 候 会 触发 onchange 事件 。 

Password 对 象 表示 表单 中 的 密码 字段 。<input type="password"> 标 签 在 表单 上 每 出 现 一 
次 ， 一 个 Password 对 象 就 会 被 创建 。 该 文本 输入 字段 供用 户 输入 某 些 敏感 的 数据 ， 例 如 密 
码 等 ， 当 用 户 输入 的 时 候 输入 被 掩盖 (例如 使 用 星 号 *),， 以 防止 旁边 的 人 看 到 输入 的 内 容 。 

@ Text 和 Password 对 象 的 属性 

表 19.14 列 出 了 Text 和 Password 对 象 的 属性 。 


表 19.14 Text 和 Password 对 象 的 属性 


属性 描述 
defaultValue | 。 name | 文本 域 的 名 称 
disabled 文本 域 是 否 被 禁用 文本 域 是 否 为 只 读 的 
fom | 包 售 文本 域 的 表单 | ”size | 文本 域 允 许 输 入 的 字符 数 
二 文本 城 的 竹下 东 天 
maxLength 文本 域 中 的 最 大 字符 数 文本 域 的 value 属性 值 


四 Text 和 Password 对 象 的 方法 

Text 和 Password 对 象 主要 使 用 select(0 方 法 , 该 方法 选取 文本 域 中 的 内 容 。 

贺 19.10 js(Text).html， 说 明了 Text 对 象 的 主要 属性 和 方法 的 使 用 ， 
如 图 19.9 所 示 。 单 击 【 选 择 文本 】 按 钮 ， 则 自动 将 文本 框 中 的 文字 选中 。 


回 蜗 
后: 


在 下 面 的 3 个 文本 框 中 ， 当 输入 达到 文本 框 最 大 长 度 时 将 自动 跳 到 下 一 个 视频 讲解 
文本 框 ， 如 图 19.10 所 示 。 
选择 文本 [选择 文本 [ 笃 文 寺 ] 选择 文本 ] 
到 文本 框 最 大 长 度 时 自动 跳 到 下 一 个 文本 框 到 文本 框 最 大 长 度 时 自动 跳 到 下 一 个 文本 框 
le lz] LD] 
图 19.9 js(Text).html 示意 图 1 图 19.10 js(Text).html 示意 图 2 
源 代码 如 下 : 
<head> 
<title>Text 对 象 </title> 
<script> 


window.onload=function(){ 
document .getElementById("btn") .onclick=function(){ 
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document .getElementById ("myText") .select ();} 

document .getElementById("t1") .onkeyup=function(){ 
checkLen (this, this.value);} 

document .getElementById("t2") .onkeyup=function(){ 
checkLen (this, this.value);} 

document .getElementById("t3") .onkeyup=function(){ 
checkLen (this, this.value);} 

} 

function checkLen (ogEtext, sstr){ 

if (ssStr.length==oEtext.maxLength){ 
Var iNext=oEtext.tabIndex; 
if (iNext<document .getElementById ("myForm") .length){ 

document .getElementById ("myForm") .elements [iNext] .focus(); 

} 


} 
</script> 
</head> 
<body> 
<form> 
<input size="25" type="text" id="myText" value=" 选 择 文 本 " /> 
<input type="button" value=" 选 择 文本 " id="btn" /> 
</form> 
<p> 到 文本 框 最 大 长 度 时 自动 跳 到 下 一 个 文本 框 </p> 
<form id="myForm"> 
<input size="3" tabindex="]l" maxlength="3" id="tl" /> 
<input size="2" tabindex="2" maxlength="2" id="t2" /> 
<input size="3" tabindex="3" maxlength="3" id="t3" /> 
</form> 
</body> 


19.1.8 Textarea 对象 


Textarea 对 象 表示 表单 中 的 一 个 文本 区 。 在 表单 中 <textarea> 标 签 每 出 现 一 次 ， 一 个 
Textarea 对 象 就 会 被 创建 。Textarea 对 象 的 属性 和 方法 与 Text 对 象 基本 相同 ， 不 同 的 是 
Textarea 对 象 多 了 两 个 属性 一 一 rows、cols。 表 19.15 列 出 了 Textarea 对 象 的 属性 。 


表 19.15 ”Textarea 对 象 的 属性 


属 性 描 述 
cols Textarea 的 列 宽 
IOWS Textarea 的 行 数 


19.1.9 Select 和 Option 对 象 
Select 对 象 表示 表单 中 的 下 拉 列 表 。 在 表单 中 <selec 人 标签 每 出 现 一 次 ， 一 个 Select 对 
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象 就 会 被 创建 。 
Option 对 象 表示 表单 中 下 拉 列表 中 的 选项 。 在 表单 中 <option> 标 签 每 出 现 一 次 ， 一 个 
Option 对 象 就 会 被 创建 。 
@ Select 对 象 的 属性 


表 19.16 列 出 了 Select 对 象 的 属性 。 
表 19.16 Select 对 象 的 属性 


述 属 性 
multiple 


描 述 


描 


下 拉 列 表 中 的 所 有 选项 集合 是 否 选择 多 个 项 目 
disabled 是 否 应 禁用 下 拉 列 表 name 下 拉 列 表 的 名 称 
form | 包含 下 拉 列 表 的 表单 selectedIndex 下 拉 列 表 中 被 选项 目的 索引 号 
id | 下 拉 列 表 的 id size 下 拉 列 表 中 的 可 见 行 数 
length 下 拉 列 表 中 的 选项 数目 type 返回 下 拉 列 表 的 表单 类 型 


四 Select 对 象 的 方法 
表 19.17 列 出 了 Select 对 象 的 方法 。 


表 19.17 Select 对 象 的 方法 


太 。 法 描 述 
向 下 拉 列 表 中 添加 一 个 选项 。option 必需 ， 是 要 添加 的 选项 ， 必 须 是 option 或 
add(option,before) | optgroup 元 素 。before 必需 ,表示 在 选项 数组 的 该 元 素 之 前 增加 新 的 元 素 ， 如 果 该 
参数 是 null， 元 素 添 加 到 选项 数组 的 末尾 
remove(index) 从 下 拉 列 表 中 删除 一 个 选项 。index 必需 ， 规 定 要 删除 的 选项 的 索引 号 


全 Option 对 象 的 属性 


表 19.18 列 出 了 Option 对 象 的 属性 。 
表 19.18 ”Option 对 象 的 属性 

属 性 描 述 
defaultSelected selected 属性 的 默认 值 
disabled 选项 是 否 被 禁用 
index 下 拉 列 表 中 某 个 选项 的 索引 位 置 
label 选项 的 标记 《〈 仅 用 于 选项 组 
selected selected 属性 值 
text 某 个 选项 的 纯 文 本 值 
value 被 送 往 服务 器 的 值 


[ 贺 19. 11 js(Select).html， 使 用 了 Select 和 Option 对 象 的 主要 属性 和 方法 ， 通 过 选中 
下 拉 列 表 项 在 文本 框 中 显示 选中 的 内 容 ， 如 图 19.11 所 示 。 


选择 常用 的 浏览 器 。 [TInternet Explorer 国 
常用 的 浏览 器 是 : [Internet Explorer 


选择 数字 ，[4 圆 [一 > ] 14 


视频 讲解 


图 19.11 js(Select).html 示意 图 


| 394 


第 19 章 HTML DOM 对 象 和 RegExp 对 象 19 


源 代码 如 下 : 


<head> 
<title>Select 对 象 </title> 
<script> 


window.onload=function (){ 


document .getElementById ("incommonusage") .value=document .getElementBy 
Id("myList") .options [0] .text; 
document .getElementById ("myList") .onchange=function(){ 
document .getElementById ("incommonusage") .value=document .getElementBy 
Id("myList") .options [document .getElementById ("myList") .selectedIndex]. 
text;} 
document .getElementById ("btn") .onclick=function(){ 
moveNumbers ();} 
} 
function moveNumbers (){ 
Var oNum=document .getElementById ("num"); 
var sOption=oNum.options[oNum.selectedIndex] .text; 
Var SStr=document .getElementById("result") .value; 
sStr+=sOption; 
document .getElementById ("result") .value=sSstr; 
} 


</script> 
</head> 
<body> 
<form> 


<labe1> 选 择 常 用 的 浏览 器 : </label> 

<select id="myList"> 
<option>Internet Explorer</option> 
<option>Chrome</option> 
<option>Firefox</option> 

</select><br /> 

<labe1> 常 用 的 浏览 器 是 : </1label> 

<input type="text" id="incommonusage" size="20" /> 


</form> 
<form> 


<labe1> 选 择 数字 : </1label> 

<select id="num"> 
<option>0</option><option>1</option> 
<option>2</option><option>3</option> 
<option>4</option><option>5</option> 
<option>6</option><option>7</option> 
<option>8</option><option>9</option> 

</select> 

<input type="button" id="btn" value="--&gt;" /> 

<input type="text" id="result" size="20" /> 
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</form> 
</body> 


19.1.10” Submit、Reset 和 Button 对 象 


Submit 对 象 表示 表单 中 的 提交 按钮 。 在 表单 中 <input type="submit"> 标 签 每 出 现 一 次 ， 
一 个 Submit 对 象 就 会 被 创建 。 当 触发 onclick 事件 时 ， 响 应 事件 的 行为 系统 已 提供 ， 即 提 
交 表 单 的 内 容 。 

Reset 对 象 表示 表单 中 的 重 置 按钮 。 在 表单 中 <input type="reset"> 标 签 每 出 现 一 次 ， 

个 Reset 对 象 就 会 被 创建 。 当 重 置 按钮 被 单 击 时 ， 包 含 它 的 表单 中 的 所 有 输入 元 素 的 值 都 
重 置 为 默认 值 。 默 认 值 由 HTIML value 属性 或 JavaScript 的 defaultValue 属性 指定 。 

Button 对 象 表示 文档 中 的 按钮 。 在 文档 中 <input type="button"> 标 签 每 出 现 一 次 ， 一 个 
Button 对 象 就 会 被 创建 ， 该 元 素 没有 默认 的 行为 。 

表 19.19 列 出 了 Submit、Reset 和 Button 对 象 的 属性 。 


表 19.19 Submit、Reset 和 Button 对 象 的 属性 


属性 描述 
disabled 是 否 禁用 按钮 | name | 按钮 的 名 称 


form 包含 该 按钮 的 表单 按钮 的 表单 元 素 类 型 

id 在 按钮 上 显示 的 文本 

贺 19.12 js(Button).html， 使 用 了 Submit、Reset 和 Button 对 象 的 主要 属性 和 方法 。 

单 击 【 禁 用 】 按 钮 ， 该 按钮 不 可 用 ， 变 为 灰色 ， 并 显示 
按钮 的 id 和 type 属性 信息 ， 如 图 19.12 所 示 。 


Id: btn, type: button 


源 代码 如 下 : 图 19.12 js(Button) 示 意图 
<head> 

<title>Button 对 象 </title> 

<script> 


window.onload=function (){ 
document .getElementById ("btn") .onclick=function(){ 
Var SStr="Id: " + document .getElementById("btn") .id+", type: " 十 
document .getElementById ("btn") .type; 
document .getElementById ("btn") .disabled=true; 
document .getElementById ("lbl1") .innerHTML=sStr; 
} 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" id="btn" value=" 禁 用 " /> 
<label id="lbl"></label> 
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</form> 
</body> 


19.1.11 Form 对 象 


Form 对 象 代表 一 个 表单 。 在 文档 中 <form> 每 出 现 一 次 ，Form 对 象 就 会 被 创建 。 
@ Form 对 象 的 属性 
表 19.20 列 出 了 Form 对 象 的 属性 。 


表 19.20 ”Form 对 象 的 属性 


属 性 


elements[] 


单 中 所 有 元 素 的 集合 
单 的 action 属性 

设置 或 返回 用 于 编码 表单 内 容 的 MIME 类 型 。 如 果 表 单 没 有 enctype 属性 , 那么 提 
六 文 本 时 的 默认 值 是 "application/x-www-form-urlencoded"。 当 input type 为 "file" 时 ， 
是 A mltipartform data” 


action 


enctype 


method 


四 Form 对 象 的 方法 
表 19.21 列 出 了 Form 对 象 的 方法 。 


表 19.21 Form 对 象 的 方法 


方 法 描 述 

reset() 把 表单 的 所 有 输入 元 素 重 置 为 默认 值 
submitO 提交 表单 

@ Form 对 象 的 事件 


表 19.22 列 出 了 Form 对 象 的 事件 。 
表 19.22 Form 对 象 的 事件 


事件 描述 
onreset 单元 素 之 前 调用 

之 前 调用 。 如 果 onsubmit 返回 false， 表 单 的 元 素 不 会 提交 。 如 果 该 函 
onsubmit 。 | 数 返 回 其 他 值 或 什么 部 没有 近 回 ， 则 才 单 会 被 提交 


贰 19.43 oo 使 用 了 i 对 象 的 主要 名 字 (1-10 个 字符 ) ， [12345678900 
属性 和 方法 ， 对 表单 元 素数 据 的 合法 性 进行 校 验 ， 如 ”| 年 龄 Ui 到 100) ，[ . 


图 19.13 所 示 。 在 表单 里 输入 内 容 ， 如 果 不 符合 要 求 , 将 。 | 岂 ” 一 
弹出 消息 框 进行 提示 。 
源 代码 如 下 : 图 19.13 js(Form).html 示意 图 
<head> 


<title>Form 对象 </title> 
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<script> 
window.onload=function(){ 
document .getElementById ("name") .focus(); 
document .getElementById ("forml") .onsubmit=function() {return 
validate();} 
} 
function validate(){ 
Var iEamil=document .getElementById ("email") .value.indexOf ("@"); 
Var sAge=document .getElementById("age") .value; 
Var sName=document .getElementById ("name") .value; 
if (sName.length>10 || sName.length<=0){ 
alert ("最 多 1-10 个 字符 。"); 
document .getElementById ("name") .focus (); 
return false; } 
if (isNaN(sAge)||sAge<1||sAge>100){ 
alert ("年 龄 必须 是 1 到 100 的 数字 。") ; 
document .getElementById("age") .focus () 
return false; 1 
if (iEamil==-1){ 
alert ("不 是 有 效 的 电子 邮件 地 址 。") ; 
document .getElementById ("email") .focus(); 
return false; } 
return true; 
} 
</script> 
</head> 
<body> 
<form action="" id="forml"> 
<label> 名 字 (1-10 个 字符 ): </label> 
<input type="text" id="name" size="10" /><br /> 
<label> 年 龄 (从 1 到 100): </label> 
<input type="text" id="age" size="3" /><br /> 
<labe1> 电 子 邮 件 : </1abel> 
<input type="text" id="email" size="2]1" /><br /> 
<input type="submit" value=" 提 交 " /> 
</form> 
</body> 


19.1.12 ”一 个 小 游戏 一 一 剪子 石头 布 


设计 完成 一 个 剪子 石头 布 的 游戏 ， 玩 家 会 在 布 、 剪 子 、 石 头 图 案 中 选择 一 个 ， 然 后 系 
统 产生 一 个 1 一 3 的 随机 数 ，1 表示 布 ，2 表示 剪子 ，3 表示 石头 ， 和 玩家 的 选择 进行 比较 ， 
记录 玩家 的 输赢 和 积分 , 共 10 个 回合 , 游戏 结束 。 游戏 结束 后 , 可 以 让 玩家 选择 再 次 开始 。 
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[ 夯 ]19.14 首先 建立 js(finger-guessing game).html 页 面 ， 如 图 19.14 所 示 。 


图 19.14 js(finger-guessing game).html 示意 图 1 


源 代码 如 下 : 


<head> 
<tit1le> 前 子 石头 布 </title> 
<script src="js/finger-guessing%20game.js"></script> 
<link href="css/finger-guessing%20game.css" type="text/css" rel= 
"stylesheet"> 
</head> 
<body> 
<div id="guess"> 
<! 一 -游戏 开始 界面 -> 
<div id="start"><img src="images/start.jpg" id="startgame"></div> 
<! 一 -游戏 记录 界面 --> 
<div id="display"> 
<div class="text"> 
<h2> 生 命 值 </h2> 
<p id="guesscount">10</p> 
<h2> 积 分 </h2> 
<p id="integral">0</p> 
</div> 
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<! 一 -显示 系统 和 玩家 选择 剪子 石头 布 ) 的 图 像 --> 


<img src="images/noselect.jpg" id="system"><img src="images/ 
noselect .jpg" id="player"> 
<div class="text"> 
<h2> 玩 家 </h2> 
<p id="playerwincount">0</p> 
<h2> 系 统 </h2> 
<p id="systemwincount">0</p> 
</div> 
</div> 
<!-- 玩 家 选择 界面 --> 
<div id="select"> 
<img src="images/1.jpg" id="playerselectl" title=" 布 "><img src= 
"images/2.jpg" id="playerselect2" title=" 前 子 "><img 
src="images/3.jpg" 
id="playerselect3" title=" 石 头 "> 
</div> 
<! 一 -游戏 结束 界面 --> 
<div id="over"></div> 
</div> 
</body> 
然后 建立 样式 文件 “css/finger-guessing game.css” 声 明 样 式 ， 样 式 如 下 : 
* {padding: Opx;margin: Opx;} 
body {font-family: "微软 雅 黑 ",，"sans-serif";} 
#start {cursor: pointer;} 
#guess { 
max-width: 330px;min-width: 260px; 
margin: 0 auto; 
height: 215px; 
overflow: hidden; /* 洪 出 部 分 不 可 见 */ 
} 
#0over { 
max-width: 330px;min-width: 260px; 
height: 215px; 
background-image: url("../images/over.jpg"); 
} 
#display, #select { 
/* 采 用 flex 布局 ， 子 元 素 水 平和 竺 直 都 居中 */ 
flex-flow: row wrap; 
justify-content: center; 
align-items: center;display: none; 
} 
.text {background-color: #6CD5CB;min-width: 91px;} 
.text p {color: #FFFFFF;} 
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h2, p {text-align: center;} 
h2 {font-size:0.8rem;} 
/* 玩 家 选择 剪子 石头 布 图 像 时 的 不 透明 过 渡 效 果 */ 
img[id^="playerselect"] { 
transition: opacity 1s ease; 
cursor: pointer; 
opacity: 0.5; 
| 
img[id^="playerselect"] :hover {opacity: 1;} 
#system, #player { 
max-width: 72px;min-width: 72px; 
max-height: 80px;min-height: 80px; 
} 
#system, #player {margin:0 lpx;} 
/* 为 后 添加 的 元 素 预 设 的 样式 */ 
#overmessage { 
Color: #FFFFFF;font-size: 1.2rem;padding-top: 95px; 
} 


最 后 建立 脚本 文件 “js/finger-guessing game.js”， 游 戏 运行 效果 如 图 19.15 所 示 。 代 码 


如 下 : 


图 19.15 js(finger-guessing game).html 示意 图 2 
Var iGuesscount; // 生 命 值 
var iPlayerwincount; ”// 玩 家 启 的 次 数 
Var iSystemwincount; // 系 统 赢 的 次 数 
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Var iIntegral; // 积 分 
window.onload=function() { 
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document .getElementById ("startgame") .addEventListener ("click", start); 


// 开 始 游戏 进行 初始 化 设置 

function start() { 
iGuesscount=10; 
iPlayerwincount=0; 
isystemwincount=0; 
iIntegral=0; 
document .getElementById ("guesscount") .textContent=iGuesscount. 
tostring(); 
document .getElementById ("playerwincount") .textContent= 
iPlayerwincount .toString () 7 
document .getElementById ("systemwincount") .textContent= 
isystemwincount .tostring(); 
document .getElementById ("integral") .textContent=iIntegral. 
tostring(); 
document .getElementById("start") .style.display="none"; 
document .getElementById ("display") .style.display="flex"; 
document .getElementById("select") .style.display="flex"; 
document .getElementById ("system") .src="images/noselect .jpg"; 
document .getElementById ("player") .src="images/noselect .jpg"; 


document .getElementById ("playerselect1") .addEventListener ("click", 
function() { 
submitguess (1); 
3 
document .getElementById ("playerselect2") .addEventListener ("click", 
function() { 
submitguess (2); 
a 
document .getElementById ("playerselect3") .addEventListener ("click", 
function() { 
submitguess (3); 
1); 
// 计 算 系统 赢 的 次 数 
function fSystemwin() { 
isystemwincount++; 
document .getElementById ("systemwincount") .textContent= 
isystemwincount .tostring(); 
} 
// 计 算 玩 家 赢 的 次 数 
function fPlayerwin() { 


iPlayerwincount++; 
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document .getElementById ("playerwincount") .textContent= 
iPlayerwincount.tostring(); 
} 
// 计 算 积分 
function integral(add) { 
iIntegral+=add; 
document .getElementById ("integral") .textContent = iIntegral 
-EDSEring()s 
|， 
// 根 据 玩家 选择 进行 处 理 
function submitguess (guess) { 
system=Math.floor (Math.random() * 3 + 1); 
document .getElementById ("system") .src="images/" + System 
-toString() + "1.jpg"; 
document .getElementById ("player") .src="images/" + guess.tostring() 
le 
if (guess==1) { 
if (system==1) {integral (1);} 
if (syste ) {fSystemwin();} 
if (system==3) {fPlayerwin();integral (3);} 


if (guess==2) { 
if (system==1) {fPlayerwin();integral (3);} 
if (system==2) {integral (1);} 
if (system==3) {fSystemwin();} 


if (guess==3) { 
if (system==1) {fSystemwin();} 
if (system==2) {fPlayerwin();integral (3);} 
if (system==3) {integral (1);} 
} 
iGuesscount——; 
document .getElementById ("guesscount") .textContent=iGuesscount 
.tostring(); 
// 生 命 值 为 0， 游 戏 结束 并 处 理 
if (iGuesscount==0) { 
document .getElementById ("start") .style.display="none"; 
document .getElementById ("display") .style.display="none"; 
document .getElementById ("select") .style.display="none"; 
Var h2=document .createElement ('h2°'); 
h2 .textContent=" 本 次 游戏 你 战胜 了 系统 "” + iPlayerwincount.tostring () 
+ "次 ， 胜 率 " + (iPlayerwincount / 10 * 100) -toString() + "%， 继续 
加 油 ! "; 
h2.setRAttribute ("id"，"overmessage") 7 


document .getElementById('over') .appendCchild (h2) 7 
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1 


3 


document .getElementById ("over") .addEventListener ("click", end); 
// 回 到 游戏 开始 
function end() { 

document .getElementById ("start") .style.display="flex"; 

Var oH2=document .getElementById ("overmessage"); 

oH2 .parentNode.removeChild (oH2); 


19.2 RegExp 对 象 


RegExp 对 象 表示 正则 表达 式 ， 一 个 正则 表达 式 就 是 由 普通 字符 (例如 字符 a 到 z) 以 
及 特殊 字符 〈 称 为 元 字符 ) 组 成 的 文字 模式 。 该 模式 描述 在 查找 文字 主体 时 待 匹配 的 一 个 
或 多 个 字符 串 。 正 则 表达 式 作为 一 个 模板 ， 将 某 个 字符 模式 与 所 搜索 的 字符 串 进行 匹配 。 
正则 表达 式 的 主要 用 途 如 下 : 

(1) 测试 字符 串 的 某 个 模式 。 例 如 ， 可 以 对 一 个 输入 字符 串 进 行 测试 ， 看 该 字符 串 是 
否 存在 一 个 电话 号 码 模式 或 一 个 信用 卡号 码 模式 ， 称 为 数据 有 效 性 验证 。 

(2) 蔡 换 文本 。 例 如 ， 可 以 在 文档 中 使 用 一 个 正则 表达 式 来 标识 特定 文字 ， 然 后 全 部 
将 其 删除 ， 或 者 蔡 换 为 其 他 文字 。 

(3) 根据 模式 匹配 从 字符 串 中 提取 一 个 子 字符 串 。 

在 ECMAScript 中 有 以 下 两 种 方法 声明 正则 表达 式 。 

(1) 直接 量 语法 : 

Var sRegExp=/pattern/attributes 

(2) 创建 RegExp 对 象 的 语法 : 


Var sRegExp=new RegExp (pattern,attributes); 


其 中 ， 参 数 pattern 是 一 个 字符 串 ， 指 定 了 正则 表达 式 ; attributes 是 一 个 可 选 的 字符 串 ， 包 
含 属性 “g”“i” 和 “m”， 分 别 用 于 指定 全 局 查找 (查找 所 有 匹配 而 非 在 找到 第 1 个 匹配 
后 停止 )、 忽 略 大 小 写 查 找 和 多 行 查找 。 

这 两 个 声明 都 返回 一 个 新 的 RegExp 对 象 ， 具 有 指定 的 模式 和 标志 。 

@ pattern 字符 串 

1) 方 括号 

方 括号 用 于 查找 某 个 范围 内 的 字符 ， 表 19.23 列 出 了 RegExp 正则 表达 式 方 括号 。 

2) 元 字符 

元 字符 〈Metacharacter) 是 拥有 特殊 含义 的 字符 ， 表 19.24 列 出 了 RegExp 正则 表达 式 
元 字符 。 
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表 19.23 ”RegExp 正则 表达 式 方 括号 


描 描述 


述 


[abc] 查找 方 括号 之 间 的 任何 字符 查找 任何 从 小 写 a 到 大 写 Z 的 字符 
[^abc] 查找 任何 不 在 方 括号 之 间 的 字符 查找 给 定 集合 内 的 任何 字符 


ed [adgk] 夺 找 给 定 集 合 外 的 任何 字符 
[a-z] 查找 任何 从 小 写 a 到 小 写 z 的 字符 | [eedlbluelgreen] | 查找 任何 指定 的 选项 


查找 任何 从 大 写 A 到 大 写 Z 的: 


表 19.24 ” RegExp 正则 表达 式 元 字符 


元 字 符 描 述 
5 查找 单个 字符 ， 除 了 换行 和 行 结束 符 
\w 查找 单词 字符 
\W 
\d 
D 
\s 
\S 
\b 
\B 查找 不 处 在 单词 的 开头 或 结尾 的 匹配 
\0 查找 NUL 字符 
n 查找 换行 符 
¥ 查找 换 页 符 
Ry 查找 回 车 符 
\t 查找 制 表 符 
Ww 查找 季 直 制 表 符 
Nexx 查找 以 八进制 数 xxx 规定 的 字符 
\xdd 查找 以 十 六 进 制 数 dd 规定 的 字符 
\uxXXX 查找 以 十 六 进 制 数 xxxx 规定 的 Unicode 字符 


3) 量词 
表 19.25 列 出 了 RegExp 正则 表达 式 量词 。 
表 19.25 ”RegExp 正则 表达 式 量词 


查找 任何 包含 至 少 一 个 的 字符 串 


人 n* 查找 任何 包含 零 个 或 多 个 n 的 字符 品 
nm 查找 任何 包含 零 个 或 一 个 n 的 字符 
n{X} 查找 包含 工 个 7 的 序列 的 字符 串 

71 人: 开 查找 包含 了 或 了 个 的 序列 的 字符 串 


n{X} 查找 包含 至 少 工 个 的 序列 的 字符 串 
n$ 查找 任何 结尾 为 n 的 字符 串 
n 查找 任何 开头 为 n 的 字符 串 


查找 任何 其 后 紧 接 指定 字符 串 n 的 字符 串 
查找 任何 其 后 没有 紧 接 指定 字符 串 n 的 字符 串 
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四 RegExp 对 象 的 属性 
表 19.26 列 出 了 RegExp 正则 表达 式 属 性 。 


表 19.26 RegExp 正则 表达 式 属 性 


属 性 描 述 

global RegExp 对 象 是 否 具有 标志 g 

ignoreCase RegExp 对 象 是 否 具 有 标志 i 

lastIndex 一 个 整数 ， 标 识 开 始 下 一 次 匹配 的 字符 位 置 
multiline RegExp 对 象 是 否 具有 标志 m 

source 正则 表达 式 的 源 文本 


四 RegExp 对 象 的 方法 
表 19.27 列 出 了 RegExp 正则 表达 式 方 法 。 


表 19.27 RegExp 正则 表达 式 方法 


则 表达 式 ， 也 可 用 于 改变 和 重新 编译 正则 表达 式 。 ep 为 正则 表 
达 式 。 modifier 规定 匹配 的 类 型 。“g” 用 于 全 局 匹配 ，“i” 用 于 区 分 大 小 
写 ， ”用 于 全 局 区 分 大 小 写 的 匹配 

得 指定 的 值 ， 返 回 找到 的 值 ， 并 确定 其 位 置 。 如 果 返 回 一 个 数 
其 中 存放 匹配 的 结果 。 如 果 未 找到 匹配 ， 则 返回 值 为 nul 

符 串 中 指定 的 值 。 如 果 字 符 串 string 中 含有 与 正则 表达 式 匹 配 的 文 
， 则 返回 tmue， 否 则 返回 false 


compile(regexp,modifier) 


exec(string) 


test(string) 


19.3 叮 叮 书店 “联系 我 们 ”页 面 的 表单 数据 验证 


启动 WebStorm， 打 开 叮 叮 书店 项 目 “联系 我 们 ”页 面 contact.html 和 ” 回 
样式 文件 style.css (在 第 14.3 节 建 立 )， 在 js 目录 下 新 建 contactjs 脚本 文 
件 〈 操 作 步 骤 参 照 第 17.5 节 )， 添 加 对 “联系 我 们 ”页 面 (contact.html) 
表单 数据 的 有 效 性 进行 验证 的 程序 ， 验 证 数据 包括 姓名 、 电 子 邮 件 、 电 话 En 
和 公司 , 这 4 个 数据 为 必 填 项 , 不 允许 为 空 , 姓名 必须 是 2 一 4 个 中 文字 符 ， 视频 讲解 
电话 格式 为 区 号 -号 码 ， 区 号 为 3 一 4 位 数字 ， 号 码 为 7 一 8 位 数字 ， 电 子 邮 件 地 址 格式 要 符 
合 要 求 ， 数 据 有 效 性 验证 完成 后 提交 表单 。 

进入 到 contact.html 编辑 区 , 对 姓名 、 电子 邮件 和 电话 输入 值 的 有 效 性 通过 添加 pattern 
属性 正则 表达 式 进 行 验证 ， 将 姓名 、 电 子 邮 件 和 电话 3 个 <input> 标 签 分 别 修改 如 下 。 

<input type="text" name="name" id="name" required="required" Pattern="^ 

[\u4e00-\u9fa5] [\u4e00-\u9fa5] {0,2}[\u4e00-\u9fa5]$" Placeholder=" 名 字 需 

2 一 4 个 中 文字 符 ! " autofocus="autofocus" class="contact-input"> 


<input type="email" name="dzyj" id="dzyj" required="required" placeholder= 
"电子 邮件 地 址 格式 ! " class="contact-input"> 

<input type="text" name="telephone" id="telephone" required="required" 
pattern="^[0-9] [0-9] {2, 3}[-] [0-9] {6, 7}[0-9]$" placeholder=" 固 定 电话 格式 为 


号 -号 码 ! " class="contact-input"> 


四 
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将 光标 定位 到 “</fieldset>” 按 回 车 键 ， 输 入 下 列 代码 。 


<fieldset class="contact-form" id="message"> 
<legend class="form-subtitle"> 您 提交 了 以 下 信息 </legend> 
<div id="submitmessage"></div> 

</fieldset> 


将 光标 定位 到 “<link hre 人 "style.css" rel="stylesheet">” 按 回 车 键 ， 输 入 下 列 代码 。 
<script src="js/contact.js"></script> 
切换 到 样式 文件 style.css 编辑 区 ， 定 义 下 面 样式 。 


#message{visibility:hidden;} 
#submitmessage{padding: 5px 10px;} 
进入 到 contactjs 编辑 区 ， 添 加 如 下 程序 ， 效 果 如 图 19.16 所 示 。 
window.onload = function() { 
// 让 姓名 文本 框 获得 焦点 
document .getElementById ("name") .focus () 7 


if(document .getElementById("contact") !=null){ 
document .getElementById ("contact") .onsubmit=function(){ 


Var sName=document .getElementById ("name") .value; 
Var sDzyj=document .getElementById("dzyj") .value; 
Var sTelephone=document .getElementById ("telephone") .value; 
Var sCompany=document .getElementById ("company") .value; 
Var oSex=document .getElementsByName ("sex"); 
// 获 得 性 别 选 项 值 
for (iCv=0;iCv<oSex.1length;iCv++) { 
if(oSex.item(iCv) .checked){ 
sSex=oSex.item(iCv) .value; 


} 
Var oAge=document .getElementById ("age"); 
// 获 得 年 龄 选项 值 
for (iCv=0;iCv<oAge.options.length;iCv++) { 
if(oage .options [icCcv] .selected){ 
SRAge=oRge .options [icCv] .firstCchild.nodeValue; 


} 
var sInterest="";// 获 得 爱好 选项 值 
Var oInterest=document .getElementsByName ("interest"); 
for (iCv=0;iCv<oInterest.length;iCv++) 1{ 
if(oInterest.item(iCv) .checked){ 
sInterest+=oInterest.item(iCv) .value; 


} 
document .getElementById ("message") .style.visibility= 
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"visible"; 

document .getElementById ("submitmessage") .innerHTML="<strong> 
姓名 :"+sName+"<br> 性 别 :"+sSex+"<br> 年 龄 范围 :"+sAge+"<br> 爱 

好 :"+sInterest+n"<br> 电 子 邮 件 :"+sDzyj+"<br> 固 定 电话 :"+sTelephone+ 
"<br> 公 司 :"+sCompany+"</strong>"; 

return false; // 不 提交 表单 

/*return true; ”// 提 交 表单 */ 


特刊 降价 关于 我 们 


和 你 现 在 的 位 置 : 首页 > > 联系 我 们 
日 联系 我 们 


叮 叮 书店 成 立 于 2016 年 6 月 ， 是 由 教育 部 主管 、 清 华 大 学 主办 的 综合 出 版 单位 , 植 根 于 “ 清 
华 ” 这 座 久 负 盔 名 的 高 等 学 府 ， 乖 承 清华 人 “自强 不 息 ， 厚 德 载 物 ” 的 人 文 精神 。 


姓名 : 张 而 明 
| 性别: 男女 

1 年龄 范围 : 48 关 CE " 

| 爱好 : 日 网 络 数据 库 z 编 程 


电子 邮件 ; 35311316163xom ~ 
; 国定 电话 ; 0416-3400192 
| 公司 : 清华 大 学 出 版 入 


— love cofffee love 


鲍 畅销 图 书 
国 深 府 学 习 [deep learning] 
Hadoop 权 威 指南 : 大 数据 的 存储 与 分 析 (第 4.… 


5 和 秋 叶 一 起 学 PPT 第 3 版 
;性别 : 男 本 图 深度 学 习 优化 与 识别 
a 区 块 链 原 理 、 设 计 与 应 用 
电子 邮件 :333fff3f@163.com 
.国定 电话 :0416-3400192 国 图 书 分 类 Ka 合作 伙伴 


公 


编程 党 言 中 国电 子 商务 研究 中 


图 19.16 contact.html 提交 表单 示意 图 


19.4 小结 


本 章 详细 介绍 了 HIML DOM 常用 对 象 ， 介 绍 了 正则 表达 式 和 如 何 正确 地 使 用 
ECMAScript 的 正则 表达 式 ， 最 后 详细 介绍 了 叮 叮 书 店 “ 联 系 我 们 ”页 面 表单 验证 的 整个 
实现 过 程 。 


19.5 “习题 


@ 选择 题 
(1) 网 页 中 有 一 个 窗 体 ， 名 称 是 mainForm， 该 窗 体 对 象 的 第 1 个 元 素 是 按钮 ， 名 称 是 
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myButton， 表 述 该 按钮 对 象 的 方法 是 ( )。 
A. document.forms.myButton 
B. document.mainForm.myButton 


C. document.forms[0].element[0] 


D. 以 上 都 可 以 
(2) 不 能 与 onChange 事件 处 理 相关 联 的 表单 元 素 有 赂 

A. 文本 框 B. 复 选 框 C. 列表 框 D. 按钮 
(3) 关于 正则 表达 式 声明 6 位 数字 邮编 ， 以 下 代码 正确 的 是 % 

A. varreg= Md6/: B. varreg=\d{6}\; 

C. varreg=AMd{6}/; D. varreg=new RegExp("d{6}"); 


(4) 在 下 面 的 JavaScript 语句 中 ，( ) 实现 检索 当前 页 面 的 表单 元 素 中 的 所 有 文本 
框 ， 并 将 它们 全 部 清空 。 
A. 
for (var i=0;i<forml.elements.length;i++){ 


if (forml .elements [1] .type=="text") 
forml .elements [1i] .value="";} 


B. 


for (var i=0;i<document.forms.length;i++){ 
if(forms [0] .elements [1] .type=="text") 
forms [0] .elements[i] .value="";} 


Cs 


if (document .form.elements.type=="text") 
form.elements[i] .value=""; 


D. 


for(var i=0;i<document.forms.length; i++){ 
for (var j=0;j<document.forms[i] .elements.length; j++){ 
if (document .forms [i] .elements []] .type=="text") 


document .forms[i] .elements[j] .value=""; 
} 


(5) 在 表单 (forml1) 中 有 一 个 文本 框 元 素 〈fname)， 用 于 输入 电话 号 码 ， 格 式 如 
010-82668155， 要 求 前 3 位 是 010， 紧 接 一 个 “-”， 后 面 是 8 位 数字 。 在 提交 表单 时 ， 根 据 
上 述 条 件 验 证 该 文本 框 中 输入 内 容 的 有 效 性 ， 其 中 ( ) 能 实现 。 

A. 
Var str=forml.fname.value; 
if(str.substr(0,4)!="010-" || str.substr(4).length!=8 || 


isNaN (parseFloat (str.substr(4)))) 
alert ("无 效 的 电话 号 码 ! "); 
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Var str=forml.fname.value; 
if(str.substr (0,4)!="010-" && str.substr(4).length!=8 && 
isNaN (parseFloat (str.substr (4)))) 
alert ("无 效 的 电话 号 码 ! "); 
Gs 
Var str=forml.fname.value; 
if(str.substr(0,3)!="010-" || str.substr(3).1length!=8 || 
isNaN (parseFloat (str.substr (3)))) 
alert ("无 效 的 电话 号 码 ! "); 
D. 


Var str=forml.fname.value; 
if(str.substr(0,4)!="010-" && str.substr(4).length!=8 && 
!isNaN (parseFloat (str. substr(4)))) 

alert ("无 效 的 电话 号 码 ! "); 


四 简 答题 

(1) 常用 HTML DOM 对 象 有 哪些 ? 

(2) Document 对 象 的 集合 和 方法 有 哪些 ? 

(3) FileUpload 对 象 真能 上 传 文件 吗 ? 

(4) 如 何 确定 Select 对 象 能 够 多 选 ? 

(5) 试 着 编写 一 个 猜 数 字 游 戏 ， 具 体 要 求 : 游戏 开始 后 ， 由 系统 随机 产生 一 个 1 一 100 
的 整数 ， 让 玩家 猜 这 个 数 是 什么 ? 每 猜 一 次 ， 系 统 提 示 玩 家 猜 的 数 是 大 一 些 还 是 小 一 些 ， 
并 记录 玩家 每 次 猜 的 数 和 次 数 ， 直 到 猜 正 确 为 止 。 然 后 重新 开始 游戏 。 


| 410 


客户 


HTMLS5 不 仅 对 很 多 HTML DOM 进行 了 扩充 , 而 且 增加 了 很 多 新 的 对 象 。 本 章 首先 详 
细 介 绍 了 HTML5 的 Canvas 对 象 ， 接 下 来 讨论 了 如 何 实现 元 素 的 拖 放 ， 最 后 介绍 了 如 何在 


端 进行 数据 存储 。 
本 章 要 点 : 

< 人 Canvas 对 象 。 

如 HTML5 拖 放 。 

他 HIMLS 数据 存储 。 


20.1 Canvas 对 象 


Canvas 对 象 用 于 在 网 页 上 绘制 图 形 。 在 页 面 上 放置 一 个 Canvas 对 象 ， 就 相当 于 在 页 


面 上 放置 了 一 块 “ 画 布 ” 画布 是 一 个 矩形 区 域 的 Canvas 对 象 , 用 户 可 以 在 其 中 描绘 图 形 。 


Canvas 对 象 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 ， 这 些 方法 的 使 用 


画布 


JavaScript 脚本 。 

@@ Canvas 对 象 的 属性 

。 height: 画布 的 高 度 ， 值 为 像素 或 者 窗口 高 度 的 百分比 。 当 这 个 值 改变 的 时 候 ， 在 
该 画布 上 已 经 完成 的 任何 绘图 都 会 被 擦 除 掉 。 其 默认 值 是 300。 

。 width: 画布 的 宽度 ， 值 为 像素 或 者 窗口 宽度 的 百分比 。 当 这 个 值 改变 的 时 候 ， 在 该 
画布 上 已 经 完成 的 任何 绘图 都 会 被 擦 除 掉 。 其 默认 值 是 300。 

四 Canvas 对 象 的 方法 

getContext(contextID) 返 回 一 个 用 于 在 画布 上 绘图 的 环境 对 象 , 参数 contextID 指定 在 

上 绘制 的 类 型 ， 目 前 唯一 的 值 是 “2d”， 指 定 二 维 绘图 ， 这 个 对 象 提供 了 很 多 属性 和 


方法 


于 绘图 。 
表 20.1 列 出 了 Canvas 对 象 的 主要 属性 。 
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表 20.1 Canvas 对 象 的 主要 属性 

属 性 描 述 
fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 
strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 
shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形 状 的 乖 直 距离 
lineCap 设置 或 返回 线条 的 结束 端点 样式 
lineJoin 设置 或 返回 两 条 线 相 交 时 所 创建 的 拐角 类 型 
lineWidth 设置 或 返回 当前 的 线条 宽度 
miterLimit 设置 或 返回 最 大 斜 接 长 度 


表 20.2 列 出 了 Canvas 对 象 的 主要 方法 。 


表 20.2 Canvas 对 象 的 主要 方法 


createLinearGradient(x0.y0.xl.yl) 


createPattern(image,"repeatlrepeat-x|repeat-y| 
no-repeat") 


createRadialGradient(x0,y0,r0,x1,y1,r1) 


创建 线性 渐变 (用 在 画布 内 容 上 ) 
x0: 渐变 开始 点 的 x 坐标 ; y0: 渐变 开始 点 的 y 坐标 
点 的 y 坐标 


在 指定 的 方向 上 重 
image: 规定 要 使 用 的 图 片 、 画 布 或 视频 元 素 

repeat: 默认 ， 在 水 平和 冬 直 方向 重复 

repeat-x: 只 在 水 平方 向 重复 

repeat-y: 只 在 徘 直方 向 重复 

no-repeat: 只 显示 一 次 〈 不 重复 ) 

创建 放射 状 / 环 形 的 渐变 〈 用 在 画布 内 容 上 ) 

x0: 渐变 的 开始 圆 的 x 坐标 ，y0: 渐变 的 开始 圆 的 y 
坐标 ; r0: 开始 圆 的 半径 

x1: 渐变 的 结束 圆 的 x 坐标 ; y1: 渐变 的 结束 圆 的 y 
坐标 ; rl: 结束 圆 的 半径 


addColorStop(stop,color) 


规定 渐变 对 象 中 的 颜色 和 停止 位 置 
stop: 0.0 一 1.0 的 值 ， 表 示 渐 变 中 开始 与 结束 之 间 的 


color: 在 结束 位 置 显示 的 CSS 颜色 值 


rect(x,y,width,height) 


fillRect(x,y,width,height) 


创建 矩形 

x: 拖 形 左上 角 的 x 坐 标 ; ?: 矩形 左上 角 的 了 坐标 
width: 矩形 宽度 ; height: 矩形 高 度 ， 单 位 为 像素 
绘制 “被 填充 ”的 矩形 


strokeRect(x,y,width,height) 


绘制 矩形 (无 填充 ) 


clearRect(x,y,width,height) 
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描 述 
向 画布 上 绘制 图 像 、 画 布 或 视频 
img: 规定 要 使 用 的 图 像 、 画 布 或 视频 
sx: 可 选 ， 剪 切 的 x 坐标 ; sy: 可 选 ， 剪 切 的 了 坐标 
swidth: 可 选 ， 被 剪 切 图 像 的 宽度 ;sheight: 可 选 ， 被 
剪 切 图 像 的 高 度 
x: 在 画布 上 放置 图 像 的 x 坐标 位 置 ; y: 在 画布 上 放 
置 图 像 的 y 坐标 位 置 
width: 可 选 ， 图 像 的 宽度 height: 可 选 ， 图 像 的 高 
度 〈 伸 展 或 缩小 图 像 ) 
把 绘画 的 状态 输出 到 一 个 dataURL 中 重新 装载 


drawImage(img,sx,sy,swidth,sheight,x,y,width, 
height) 


toDataURLO 


20.1.1 Canvas 基础 


使 用 Canvas 完成 绘画 需要 两 大 步骤 。 
@@ 向 页 面 添加 Canvas 
在 添加 Canvas 时 必须 规定 其 jd、 宽度 和 高 度 。 例 如 : 


<Canvas id="myCanvas" width="200" height="100"></canvas> 


四 通过 JavaScript 绘制 

Canvas 本 身 是 没有 绘图 能 力 的 ， 所 有 的 绘制 工作 必须 通过 JavaScript 脚本 代码 完成 。 
在 使 用 JavaScript 绘制 图 形 时 需要 经 过 以 下 几 个 步骤 : 

1) 取得 Canvas 对 象 

首先 用 document.getElementById() 等 方法 取得 Canvas 对 象 ， 因 为 需要 调用 这 个 对 象 提 
供 的 方法 来 绘制 图 形 。 

2) 取得 上 下 文 (Context) 

在 绘制 图 形 的 时 候 要 用 到 图 形 上 下 文 ， 图 形 上 下 文 是 一 个 封装 了 很 多 绘图 功能 的 对 
象 。 一 般 使 用 Canvas 对 象 的 getContext() 方 法 获得 图 形 上 下 文 ， 将 参数 设置 为 “2d”。 

3) 填充 与 绘制 边框 

Canvas 绘制 有 以 下 两 种 方法 。 

(1) 填充 (fill0): 填充 是 将 图 形 内 部 填 满 。 

(2) 绘制 边框 (stroke()): 绘制 边框 是 不 把 图 形 内 部 填 满 ， 只 是 绘制 图 形 的 外 框 。 

4) 设置 绘制 样式 

在 绘制 图 形 的 时 候 首 先 要 设 定好 绘制 的 样式 ， 然 后 就 可 以 调用 有 关 方 法 进行 绘制 。 

(1) fillStyle: 填充 样式 属性 ， 设 置 填充 颜色 值 。 

(2) strokeStyle: 边框 样式 属性 ， 设 置 边框 的 填充 颜色 。 

5) 指定 画笔 宽度 

使 用 图 形 上 下 文 对 象 (Context) 的 lineWidth 属性 设置 图 形 边框 的 宽度 。 在 绘制 图 形 
的 时 候 ， 任 何 直 线 都 可 以 通过 lineWidth 属性 指定 宽度 。 
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6) 绘制 矩形 
使 
fillRect (x, y,width,height) 

strokeRect (x, y, width, height) 


这 两 种 方法 的 参数 是 一 样 的 , x 是 指 矩形 的 起 点 
横 坐标 , y 是 指 矩形 的 纵 坐 标 , 坐标 的 原点 是 Canvas 
加 画布 的 左上 角 ，width 是 指 和 矩形 的 长 
总，height 是 指 和 矩形 的 高 度 。 

贺 20.1 js(canvasRect).html, 
说 明了 Canvas 绘制 矩形 的 步骤 ， 效 
果 如 图 20.1 所 示 。 


视频 讲解 
源 代码 如 下 : 


<head> 
<title>Canvas 对 象 </title> 
<script> 
window.onload=function(){ 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


flIRect( 方 法 和 strokeRect() 方 法 来 填充 矩形 和 绘制 矩形 的 边框 。 


图 20.1 js(canvasRect) .html 示意 图 


Var oCanvas=document .getElementById ("myCanvas"); 


Var oContext=oCanvas.getContext ("2d") 
.fillSstyle="#CCCCCC"; 
fillRect (0, 0, 200, 200); 
.Strokestyle="#FF0000"; 


oContext 
oContext. 
oContext 


oContext .lineWwidth=10; 
oContext .strokeRect (10, 10, 100, 100) 
oContext .fillstyle="#00FFO00"; 
oContext .fillRect (10, 10, 100, 100); 
1 
</script> 

</head> 

<body> 

<canvas id="myCanvas"></canvas> 

</body> 


有 


关于 矩形 ， 除 了 示例 中 所 讲 到 的 两 个 方法 之 外 ， 还 有 一 个 clearRect( 方 法 ， 该 方法 将 
指定 的 矩形 区 域 中 的 图 形 擦 除 ， 使 得 矩形 区 域 中 的 颜色 全 部 变 为 透明 。 


20.1.2 ”使 用 路 径 


除了 长 方形 和 正方 形 以 外 ， 要 想 绘制 其 他 图 形 ， 需 要 使 
还 是 要 取得 图 形 上 下 文 ， 然 后 执行 如 下 步骤 。 

(1) 开始 创建 路 径 。 

(2) 创建 图 形 的 路 径 。 

(3) 路 径 创 建 完成 后 关闭 路 径 。 
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用 路 径 。 同样 ， 在 绘制 开始 时 
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(4) 设 定 绘制 样式 ， 调 用 绘制 方法 绘制 路 径 。 
也 就 是 说 ， 首 先 使 用 路 径 来 勾勒 图 形 轮廓 ， 然 后 设置 颜色 进行 绘制 。 
表 20.3 列 出 了 Canvas 对 象 的 主要 路 径 方法 。 


表 20.3 Canvas 对 象 的 主要 路 径 方法 


方 ” 法 描述 
fill0 填充 当前 绘图 〈 路 径 ) 
strokeO 绘制 已 定义 的 路 径 


beginPath(x,y,width,height) 


起 始 一 条 路 径 ， 或 重 置 当前 路 径 


把 路 径 移 动 到 画布 中 的 指定 点 ， 不 创建 线条 


Tove To x: 路 径 的 目标 位 置 的 x 坐标 ，y: 路 径 的 目标 位 置 的 y 坐标 
closePathO 创建 从 当前 点 回 到 起 始点 的 路 径 

添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 《该 方 
法 并 不 会 创建 线条 

0 从 原始 画布 上 前 切 任意 形状 和 尺寸 的 区 域 


quadraticCurveTo(cpx,cpy,x,y) 


bezierCurveTo(cplx,cply,cp2x, 


cp2y,X,y) 


arc(x,y,r,sAngle,eAngle, 


创建 二 次 贝 塞 尔 曲 线 
cpx: 贝 塞 尔 控制 点 的 x 坐标; cpy: 贝 塞 尔 控制 点 的 y 坐标 


x: 结束 点 的 x 坐标 ，y: 结束 点 的 y 坐标 

创建 三 次 方 贝 塞 尔 曲线 

cplx: 第 1 个 贝 塞 尔 控制 点 的 x 坐标 ; cply: 第 1 个 贝 塞 尔 控制 点 的 
y 坐标 

cp2x: 第 2 个 贝 塞 尔 控制 点 的 x 坐标 cp2y: 第 2 个 贝 塞 尔 控制 点 的 
y 坐标 

x: 结束 点 的 x 坐标 ; y 结束 点 的 y 坐标 

创建 弧 / 曲 线 (用 于 创建 圆 形 或 部 分 圆 ) 

x: 圆 的 中 心 的 x 坐标 ， y: 圆 的 中 心 的 y 坐标 ; r: 圆 的 半径 
sAngle: 起 始 角 弧度 〔 弧 的 圆 形 的 三 点 钟 位置 是 0 度 ) 


counterclockwise) eAngle: 结束 角 弧 度 

counterclockwise: 可 选 ，false= 顺 时 针 ，true= 逆 时 针 

通过 arc0 来 创建 加 ， 起 始 角 为 0， 结 束 角 为 2X Math.PI 

创建 两 切线 之 间 的 弧 / 曲 线 
arcTo(xl,y1,x2,y2,1) x1: 弧 的 起 点 的 x 坐标 y1: 弧 的 起 点 的 y 坐标 

x2: 弧 的 终点 的 x 坐标, y2: 弧 的 终点 的 y 坐标 r: 弧 的 半径 
isPointInPath(x,y) 如 果 指 定 的 点 位 于 当前 路 径 中 ， 返 回 ttme， 否 则 返回 false 


js(canvasarc).html 说 明了 Canvas 绘制 圆 形 的 步骤 。 


(1) 开始 创建 路 径 。 


在 开始 创建 路 径 时 ， 使 用 图 形 上 下 文 对象 的 beginPath() 方 法 ， 该 方法 不 使 用 参数 。 通 
过 调用 该 方法 开始 创建 路 径 。 


context .beginPath () 7 


(2) 创建 圆 形 路 径 。 


在 创建 圆 形 路 径 时 ， 需 要 使 用 图 形 上 下 文 对 象 的 arc() 方 法 。 该 方法 使 用 6 个 参数 ，x 


为 绘制 圆 形 的 起 点 横 坐 标 , y 为 绘制 区 


形 的 起 点 纵 坐 标 , r 为 圆 形 半 径 , sAngle 为 开始 角度 ， 
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从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 
eAngle 为 结束 角度 ，counterclockwise 为 是 否 按 逆 时 针 方 向 进行 绘制 。 
context .arc (x, y,r, sAngle,eAngle, counterclockwise); 


arc( 方 法 不 仅 可 以 用 来 绘制 圆 形 ， 也 可 以 用 来 绘制 圆 弧 ， 因 此 必须 指定 开始 角度 与 结 
束 角度 ， 这 两 个 角度 决定 了 弧度 。counterclockwise 参数 为 一 个 布尔 值 的 参数 ， 当 参数 值 为 
true 时 按 逆 时 针 方 向 绘制 ， 当 参数 值 为 false 时 按 顺 时 针 方 向 绘制 。 

(3) 关闭 路 径 。 

在 路 径 创 建 完 成 后 ， 使 用 图 形 上 下 文 对 象 的 closePath() 方 法 关闭 路 径 。 在 关闭 路 径 后 ， 
路 径 的 创建 工作 就 完成 了 。 但 是 请 注意 ， 这 时 只 是 路 径 创建 完毕 而 已 ， 还 没有 真正 绘制 任 
何 图 形 。 


context.closePath(); 


(4) 设 定 绘 制 样 式 ， 进 行 图 形 绘制 ， 使 用 创建 
好 的 路 径 绘制 图 形 。 

在 指定 绘制 样式 时 ， 与 例 js(canvasRect).html 中 
所 述 和 矩形 的 绘制 方法 一 样 ， 使 用 fillStyle0 方 法 与 
strokeStyle() 方 法 。 

在 绘制 图 形 的 时 候 ， 还 使 用 了 fill0 方 法 (也 可 
以 使 用 stroke() 方 法 )。 这 两 个 方法 的 功能 分 别 为 “ 填 
充 图 形 ”与 “绘制 图 形 边 框 ?>。 因 为 路 径 已 经 决定 了 
图 形 的 大 小 ， 所 以 就 不 需要 在 该 方法 中 使 用 参数 来 图 20.2 js(canvasarc).html 示意 图 
指定 图 形 大 小 了 。 

贺 ?0.2 js(canvasarc).html， 效 果 如 图 20.2 所 示 。 

源 代码 如 下 : 

<head> 


<title>Canvas 对 象 路 径 </title> 视频 讲解 
<script> 


window.onload=function(){ 

Var oCanvas=document .getElementById ("myCanvas"); 

Var oContext=oCanvas.getContext ("2d"); 

oContext .fillSstyle="#F1F2F3"; 

oContext .fillRect (0, 0, 300, 300); 

for (iCv=1; iCv<10; iCv++) { 
oContext .beginPath (); 
oContext .arc (20 * iCv, 20 * iCv, 10 * iCv, 0, Math.PI * 2, true); 
oContext .closePath(); 
oContext .fillstyle="rgba(255,0,0,0.25)"; 
OContext .fil11(); 
oContext .strokestyle="#F00"; 


oContext .stroke (); 
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} 
</3cript> 
</head> 
<body> 


<canvas id="myCanvas" width="300px" height="300px"></canvas> 
</body> 


20.1.3 ”绘制 文本 


同样 ，Canvas 对 象 也 提供 了 绘制 文本 的 属性 和 方法 ， 表 20.4 列 出 了 Canvas 对 象 的 绘 
制 文本 属性 ， 表 20.5 列 出 了 Canvas 对 象 的 绘制 文本 方法 。 


表 20.4 Canvas 对 象 的 绘制 文本 属性 


属 性 描 述 

font 设置 或 返回 文本 内 容 的 当前 字体 属性 

textAlign 设置 或 返回 文本 内 容 的 当前 对 齐 方 式 

textBaseline 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 
表 20.5 Canvas 对 象 的 绘制 文本 方法 

方 法 描 述 


fillText(text,x,y,maxWidth) 
strokeText(text,x,y,max Width) 
measureText(text) 


在 画布 上 绘制 “被 填充 的 ”文本 
在 画布 上 绘制 文本 (无 填充 ) 
返回 包含 指定 文本 宽度 的 对 象 ，text 是 要 测量 的 文本 


在 绘制 文本 时 可 以 使 用 包 lText0 方 法 或 者 strokeText() 方 法 。fillText0 方 法 用 填充 的 方 
式 来 绘制 文本 字符 串 。 例 如 : 


context .fillText (text, x,y, [maxwidth] ); 

strokeText() 方 法 用 轮廓 的 方式 来 绘制 文本 字符 串 。 例 如 : 

context .strokeText (text, x,y, [maxwidth]) 7 

第 1 个 参数 text 表示 要 绘制 的 文本 文字 ， 第 2 个 参数 x 表示 要 绘制 的 文本 文字 的 起 点 
横 坐 标 ， 第 3 个 参数 y 表示 要 绘制 的 文本 文字 的 起 点 纵 坐 标 ， 第 4 个 参数 maxwidth 为 可 
选 参数 ， 表 示 显 示 文本 文字 时 最 大 的 宽度 ， 可 以 防止 文本 文字 游 出 。 

1) 设置 文字 字体 

Context .font="font-weight font-size font-family"; 


font 属性 有 3 个 参数 ， 第 1 个 参数 font-weight 规定 字体 的 粗细 ， 第 2 个 参数 font-size 
规定 文本 的 字体 尺寸 ， 第 3 个 参数 font-family 规定 文本 的 字体 系列 。 

2) 设置 文本 文字 的 垂直 对 齐 方式 

context .textBaseline="alphabetic"; 


属性 值 可 以 是 top〔 顶 部 对 齐 )、hanging( 甚 挂 )、middle (中 间 对 齐 )、bottom〔 底 部 
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\ eb 前 端 设计 


对 齐 ) 和 alphabetic (默认 值 )。 
3) 设置 文本 文字 的 水 平 对 齐 方式 


ConText .textAlign="start"; 


从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


属性 值 可 以 设置 为 start、end、left、right、center。 
[ 圆 20.3 js(canvasText).html， 说 明了 Canvas 绘制 文本 的 属性 和 方法 ， 效 果 如 图 20.3 


所 示 。 


叮 叮 弛 店 
叮 叮 书店 是 一 个 销售 IT 书籍 的 网 上 书店 。 


上 0 书店 是 一 个 销 舍 IT 书 逢 的 网 上 书店 


源 代码 如 下 : 


<head> 

<title>Canvas 对 象 文本 </title> 

<script> 
window.onload=function(){ 

Var oCanvas=document .getElementById ("myCanvas"); 

Var oContext=oCanvas.getContext ("2d"); 


<canvas id="myCanvas" width="800px" height="230px"></canvas> 


} 


oContext. 


oContext 
oContext 


oContext. 
oContext. 


oContext 
oContext 
oContext 
oContext 
oContext 


图 20.3 js(canvasText).html 示意 图 


fillstyle="#0000FF™"; 


.fillRect (0, 0, 800, 230); 
.fillStyle="#FFF"; 


strokeSstyle="#FFF"; 
font="bold 60px ' 微 软 雅 黑 '"; 


.textBaseline="top"; 

.textAlign="start"; 

.strokeText (" 叮 叮 书店 "，40，10) 
.font="bold 40px ' 微 软 雅 黑 '"; 

-fillText(" 叮 叮 书 店 是 一 个 销售 IT 书籍 的 网 上 书店 。 


oContext .fillText (" 叮 呆 书店 是 一 个 销售 IT 书籍 的 网 上 书店 "， 


</script> 
</head> 
<body> 


</body> 


20.1.4 ”绘制 图 像 


F 
上 


户 可 以 使 
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mm 


370, 150, 360); 


40, 80); 


drawImage() 方 法 在 画布 上 绘制 图 像 、 画 布 或 视频 , 也 可 以 绘制 图 像 的 某 


一 部 分 ， 增 加 或 减少 图 像 的 尺寸 。 


语法 1: 在 画布 上 定位 图 像 。 


context .drawImage (img, x, y); 


语法 2: 在 画布 上 定位 图 像 ， 并 规定 图 像 的 宽度 和 高 度 。 


context .drawImage (img, x, y, width, height); 


语法 3: 剪 切 图 像 ， 并 在 画布 上 定位 被 剪 切 的 部 分 。 
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Context .drawImage (img, sx, sy, swidth, sheight,x,y,width,height); 


表 20.6 列 出 了 drawImage0) 方 法 所 需 的 参数 值 。 
表 20.6 drawlmage() 方 法 参数 表 


果 如 图 20.4 所 示 。 


参数 描 述 

img 规定 要 使 用 的 图 像 、 画 布 或 视频 

SX 可 选 。 开 始 剪 切 的 x 坐标 位 置 

sy 可 选 。 开 始 剪 切 的 y 坐标 位 置 

swidth 可 图 像 的 

sheight 

入 在 画布 上 放置 图 像 的 x 坐标 位 置 

y 在 画布 上 放置 图 像 的 y 坐 书 

width 可 选 。 要 使 用 的 图 像 的 伸展 或 缩小 图 像 ) 
height 可 选 。 要 使 用 的 图 像 的 高 度 ( 伸 展 或 缩小 图 像 ) 


圆 ?0.4 js(canvas-video).html， 使 用 了 drawImage() 方 法 将 视频 画面 绘制 成 图 像 ， 效 


图 20.4 js(canvas-video).html 示意 图 
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从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


源 代码 如 下 : 
<head> 
<title>Canvas 对 象 图 像 </title> 
<style> 
#myCanvas{border: solid lpx #BBBBBB;} 
</style> 
<script> 


window.onload=function(){ 
document .getElementById ("cut") .onclick=function(){ 
Var oV=document .getElementById ("videol1"); 
Var oC=document .getElementById ("myCanvas"); 
oCtx=oC .getContext ('2d'); 
oCtx.drawImage (oV, 0,0,320,176) 


} 

</script> 

</head> 

<body> 

<video controls="controls" autoplay="autoplay" id="videol"> 
<source src="multimedia/mov bbb.mp4" type="video/mp4"> 
<source src="multimedia/mov bbb.webm" type="video/webm"> 
<source src="multimedia/mov bbb.ogv" type="video/ogg"> 
<p> 您 的 浏览 器 不 支持 HTML5 video 元 素 。</p> 

</video> 

<br> 

<input type="button" id="cut" value=" 截 图 "><br> 

<canvas id="myCanvas" width="320px" height="176px"> 
您 的 浏览 器 不 支持 HTML5 canvas 元 素 

</canvas> 

</body> 


20.2 HTML5 拖 放 


拖 放 是 抓 取 对 象 以 后 将 其 拖 到 另 一 个 位 置 ， 在 HIMLS 中 拖 放 是 标准 的 一 部 分 ， 任 何 


元 素 都 能 够 拖 放 。 为 了 使 元 素 可 


<img draggable="true" /> 


| 拖 动 ， 必 须 把 元 素 的 draggable 属性 设置 为 tue， 例 如: 


在 拖 动 元 素 的 过 程 中 不 仅 可 以 触发 多 个 事件 ， 还 可 以 通过 dataTransfer 对 象 携带 拖 动 


元 素 的 内 容 ， 并 将 其 放 入 目标 元 素 中 。 另 外 ， 当 元 素 被 拖 动 时 ， 还 可 以 控制 鼠标 的 形状 与 


移动 时 的 效果 。 


@ 拖 放 时 触发 的 事件 
元 素 在 拖 放 过 程 中 触发 了 多 个 事件 ， 表 20.7 列 出 了 与 拖 放 有 关 的 事件 。 
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表 20.7 与 拖 放 有 关 的 事件 
产生 事件 的 元 素 
| ”被 拖 放 的 元 素 
被 拖 放 的 元 素 


事件 


ondragstart 


描 


述 


开始 拖 放 操作 
拖 放 过 程 中 


ondrag 


ondragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 之 内 
ondragover | “ 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 
ondragleave | 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 

ondrop 拖 放 的 目标 元 素 其 他 元 素 被 拖 放 到 了 本 元 素 中 

ondragend 


四 dataTransfer 对 象 

如 果 要 将 拖 放 元 素 放 到 目标 元 素 中 ， 需 要 使 用 dataTransfer 对 象 ， 该 对 象 专门 用 于 携 
带 拖 放 过 程 中 的 数据 , 它 拥有 许多 实用 的 属性 和 方法 , 例如 “dropEffect ”与 “effectAllowed” 
属性 结合 使 用 可 以 定义 拖 放 过 程 中 的 拖 放 效 果 ， 使 用 setData() 与 getData() 方 法 可 以 将 拖 放 
元 素 的 数据 放置 于 目标 元 素 中 。 

表 20.8 列 出 了 dataTransfer 对 象 的 属性 ， 表 20.9 列 出 了 dataTransfer 对 象 的 方法 。 


表 20.8 dataTransfer 对 象 的 属性 


属 性 描 述 
表示 实际 拖 放 操作 的 视觉 效果 ， 人 允许 用 户 设置 其 值 ， 这 个 效果 必须 用 在 
dropEffect effectAllowed 属性 指定 的 允许 的 视觉 效果 范围 内 ， 人 允许 指定 的 值 为 none、copy、 
link、move 
用 来 指定 当 元 素 被 拖 放 时 所 允许 的 视觉 效果 ,可 以 指定 的 值 为 copy、 link、move、 
Sellomed copylink、 linkmove、all、none、uninitialized 
types 存 入 数据 的 种 类 


表 20.9 dataTransfer 对 象 的 方法 
方 ” 法 描 述 
清除 dataTransfer 对 象 中 存放 的 数据 ， 如 果 省 略 掉 参数 
format 就 会 清除 全 部 数据 
向 dataTransfer 对 象 中 存 入 数据 
从 dataTransfer 对 象 中 读 取 数 据 
用 img 元 素来 设置 拖 放 图 标 
x、y 两 个 参数 是 图 片 显示 相对 于 鼠标 位 置 的 偏 移 量 


在 dataTransfer 对 象 的 方法 中 使 用 了 “format” 作 为 形 参 ， 表 示 读 取 / 存 入 /清空 时 的 数 
据 格 式 ， 该 参数 的 格式 有 以 下 几 种 : 

(1) text/plain (文本 文字 格式 ); 

(2) text/html (HTML 页 面 代 码 格式 ); 

(3) text/xml (XML 字符 格式 ); 

(4) text/url-list (URL 格式 列表 )。 

[项 ?0.5 js(drag)html， 实 现 了 一 个 图 像 在 两 个 <div> 中 可 以 任意 拖 放 。 当 拖 放 图 像 元 
素 触发 dragstart 事件 时 , 将 图 像 元 素 的 相关 数据 通过 setData() 方 法 存 入 dataTransfer 对 象 中 ， 


clearData(DOMString format) 


setData(DOMString format,DOMString data) 
getData(DOMString format) 


setDragImage(Element image,long x,long y) 
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在 目标 元 素 <div> 接 收 拖 放 图 像 元 素 时 触发 drop 事件 , 在 该 事件 中 读 取 dataTransfer 对 象 中 
存 入 的 数据 ， 并 放 入 目标 元 素 <div> 中 ， 如 图 20.5 所 示 。 


图 20.5 js(drag).html 示意 图 


源 代码 如 下 : 


<head> 
<title>qdrag 对 象 拖 放 </title> 


<style> 
#divl,#div2{ width: 200px; height: 130px; border: 2px solid #D2D2D2; 
box-shadow:lpx 4px 8px #646464;display: inline-block;} 
</style> 
<script> 
function drag(event) { 
/* 使 用 setData () 方法 将 要 拖 放 的 数据 存 入 dataTransfer 对 象 */ 
event .effeAllowed="all"; 
event .dataTransfer.setData("text/html", event.target.id); 
} 
function allowDrop (event) { 
event .preventDefault (); 
event .dataTransfer.dropEffect="move"; 
} 
function drop (event) { 
/* 不 执行 默认 处 理 ( 拒 绝 被 拖 放 ) */ 
event .preventDefault (); 
/* 使 用 getData() 方 法 获取 到 数据 ， 然 后 赋值 给 data*/ 
Var oData=event .dataTransfer.getData("text/html"); 
/* 使 用 appendchild () 方法 把 拖 动 的 节点 放 到 元 素 节点 中 成 为 其 子 节点 */ 
event .target .appendchild (document .getElementById (oData)); 
} 
window.onload=function() { 
document .getElementById ("dragimg") .ondragstart = function(){ 
drag (event); 
' 
document .getElementById ("div1l") .ondrop = function(){ 
drop (event); 
3 
document .getElementById ("divl") .ondragover = function(){ 


allowDrop (event); 
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} 
document .getElementById ("div2") .ondrop=function() { 
drop (event); 
} 
document .getElementById ("div2") .ondragover=function(){ 
allowDrop (event); 
» 
]7 
</script> 
</head> 
<body> 
<div id="divl"> 
<img src="images/sara.jpg" draggable="true" id="dragimg"> 
</div> 
<div id="div2"></div> 
</body> 


20.3 ”HTML5 数据 存储 


随 着 Web 应 用 的 发 展 ， 如 何 更 好 地 在 客户 端 存储 数据 成 为 开发 者 非常 关心 的 问题 。 在 
HTML5 之 前 通常 使 用 Cookie 机 制 存 储 数据 到 用 户 的 客户 端 , 但 用 Cookie 方式 存储 客户 端 
数据 有 许多 因素 制约 其 发 展 ， 例 如 限制 保存 数据 空间 大 小 、 数 据 保密 性 差 、 代 码 操 纵 复 
杂 等 。 

在 HIML5 中 增加 了 两 种 全 新 的 数据 存储 方式 ， 即 WebStorage 和 WebSQLDatabase。 
WebStorage 可 用 于 临时 或 永久 地 保存 客户 端的 少量 数据 ，WebSQLDatabase 是 客户 端 本 地 
化 的 一 套数 据 库 系 统 ， 可 以 将 大 量 的 数据 保存 到 客户 端 ， 无 须 与 服务 器 端 进行 交互 ， 极 大 
地 减轻 了 服务 器 端的 压力 。 

WebStorage 存储 是 HTML5 为 将 数据 存储 在 客户 端 提供 的 一 项 重要 功能 ， 分 为 两 种 ， 
即 sessionStorage〔 保 存 会 话 数据 ) 和 localStorage〈 在 客户 端 长 期 保存 数据 )。 


20.3.1 sessionStorage 对 象 


使 用 sessionStorage 对 象 在 客户 端 保存 数据 的 时 间 非 常 短暂 , 该 数据 实质 上 还 是 被 保存 
在 session 对 象 中 。 用 户 在 打开 浏览 器 时 可 以 查看 操作 过 程 中 要 求 临 时 保存 的 数据 , 一 旦 关 
闭 浏览 器 ， 所 有 使 用 sessionStorage 对 象 保存 的 数据 将 全 部 丢失 。 
sessionStorage 对 象 保 存 数据 的 操作 非常 简单 ， 只 需要 调用 setItem() 方 法 ， 其 调用 格式 
如 下 : 


sessionStorage.setItem (key,value) 


其 中 ,参数 key 表示 被 保存 内 容 的 键 名 , 参数 value 表示 被 保存 内 容 的 键 值 .在 使 用 setItem() 
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方法 保存 数据 时 对 应 格式 为 ( 键 名 , 键 值 )。 一旦 键 名 设置 成 功 ， 则 不 允许 修改 ,也 不 能 重复 ， 
如 果 有 重复 的 键 名 ， 只 能 修改 对 应 的 键 值 。 

在 使 用 sessionStorage 对 和 象 中 的 setItem() 方 法 保存 数据 后 , 如果 需 要 读 取 被 保存 的 数据 ， 
应 该 调用 sessionStorage 对 象 中 的 getItem0 〇 方法， 其 调用 格式 如 下 : 


sessionStorage .getItem (key) 


其 中 ， 参 数 key 表示 设置 保存 时 被 保存 内 容 的 键 名 ， 该 方法 将 返回 一 个 指定 键 名 对 应 的 键 
值 ， 如 果 不 存在 ， 则 返回 一 个 null 值 。 


20.3.2 localStorage 对 象 


使 用 sessionStorage 对 象 只 能 保存 用 户 临 时 的 会 话 数据 , 关闭 浏览 器 后 ， 这 些 数据 都 将 
丢失 。 如 果 需 要 长 期 在 客户 端 保存 数据 ,应 该 使 用 localStorage 对 象 ， 使 用 该 对 象 可 以 将 数 
据 长 期 保存 到 客户 端 ， 直 到 人 工 清 除 为 止 。 

如 果 使 用 localStorage 对 象 保 存 数 据 内 容 ， 需 要 调用 对 象 中 的 setItem() 方 法 ， 其 调用 格 
式 如 下 : 

localSstorage.setItem(key,value) 


与 sessionStorage 对 象 保存 数据 的 方法 相同 ，localStorage 对 象 也 是 通过 调用 setItem() 
方法 按照 ( 键 名 , 键 值 ) 的 方式 进行 设置 ,只 是 调用 的 对 象 不 一 样 。 在 使 用 localStorage 对 象 保 
存 数据 后 ， 同 样 可 以 通过 调用 对 象 的 getItem() 方 法 读 取 指定 键 名 所 对 应 的 键 值 ， 其 调用 格 
式 如 下 : 

localStorage.getItem (key) 


其 中 ,参数 key 就 是 需要 读 取 键 值 内 容 的 键 名 ， 与 sessionStorage 对 象 一 样 ， 如 果 键 名 不 存 
在 ， 返 回 一 个 null 值 。 

localStorage 对 象 可 以 将 内 容 长 期 保存 在 客户 端 ， 即 使 是 重新 打开 浏览 器 也 不 会 丢失 。 
如 果 需 要 清除 localStorage 对 象 保存 的 内 容 ， 应 该 调用 localStorage 对 象 的 另 一 个 方法 一 一 
IemoveItem()， 其 调用 格式 如 下 : 


localstorage.removeItem (key) 


其 中 ， 参 数 key 表示 需要 删除 的 键 名 ， 一 旦 删除 成 功 ， 与 键 名 对 应 的 相应 数据 将 全 部 被 
删除 。 

[ 贺 20.6 js(localStorage).html, 介绍 了 使 用 localStorage 对 象 保存 和 读 取 登录 用 户 名 与 
密码 的 过 程 ， 效 果 如 图 20.6 所 示 。 


图 20.6 js(localStorage).html 示意 图 
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源 代码 如 下 : 


<head> 

<title>localStorage 对 象 </title> 

<script> 
Var sName=localStorage.getItem("keyName"); 
Var sPass=localStorage.getItem("keyPass"); 
if (sName) { 

document .getElementById ("txtName") .value=sName; 

} 
if (sPass) { 


document .getElementById ("txtPass") .value=sPass; 


document .getElementById ("btnLogin") .onclick=function() { 
Var sName=document .getElementById("txtName") .value; 
Var sPass=document .getElementById("txtPass") .value; 
localstorage.setItem("keyName", sName); 
if (document.getElementById("chkSave") .checked) { 
localstorage.setItem("keyPass", sPass); 
} else { 
localStorage.removeItem("keyPass"); 
} 
window.alert ("登录 成 功 !"); 


} 
</script> 
</head> 
<body> 
<form id="frmLogin" action=""> 
<fieldset> 
<legend> 登 录 </legend> 
<label> 名 称 : <input id="txtName" type="text"></label><br> 
<label> 密 码 : <input id="txtPass" type="password"></label> <br> 
<input id="chkSave" type="checkbox"> 是 否 保存 密码 <br> 
<input id="btnLogin" value=" 登 录 " type="button"> 
<input id="rstLogin" type="reset" value=" 取 消 "> 
</fieldset> 
</form> 
</body> 


在 本 例 中 ， 页 面 在 加 载 时 先 通过 localStorage 对 象 的 getItem() 方 法 获取 指定 键 名 的 键 
值 ， 并 保存 在 变量 中 。 如 果 不 为 空 ， 将 该 变量 值 赋 给 对 应 的 文本 框 ， 这 样 用 户 下 次 登录 时 
就 不 用 再 次 输入 ， 以 方便 用 户 的 操作 。 
用 户 单 击 “ 登 录 ” 按 钮 时 将 触发 onclick 事件， 调用 事件 函数 ， 首 先 分 别 通过 两 个 变量 
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保存 在 文本 框 中 输出 的 用 户 名 与 密码 , 然后 调用 localStorage 对 象 的 setItem() 方 法 , 将 用 户 
名 作为 键 名 “keyName” 的 键 值 进行 保存 。 如 果 选 择 了 “是 否 保 存 密码 ”选项 ， 则 将 密码 
作为 键 名 “keyPass” 的 键 值 进行 保存 ， 否 则 调用 localStorage 对 象 的 removeItem() 方 法 ， 删 
除 键 名 为 “keyPass” 的 记录 。 

@ 清空 localStorage 数据 

如 果 要 删除 某 个 键 名 对 应 的 记录 ， 只 需要 调用 localStorage 对 象 的 removeltem() 方 法 ， 
传递 一 个 保存 数据 的 键 名 即 可 删除 对 应 的 保存 数据 。 但 是 ， 有 时 保存 的 数据 很 多 ， 如 果 使 
用 removeItem() 方 法 逐条 删除 相对 麻烦 , 此 时 可 以 调用 localStorage 对 象 的 另 一 个 方法 一 一 
clear()， 该 方法 的 功能 是 清空 全 部 localStorage 对 象 保 存 的 数据 ， 其 调用 格式 如 下 : 

localstorage.clear () 

该 方法 没有 参数 ,表示 清空 全 部 的 数据 。 一 旦 使 用 localStorage 对 和 象 保存 了 数据 ， 用户 
就 可 以 在 浏览 器 中 打开 相应 的 代码 调试 工具 查看 每 条 数据 对 应 的 键 名 与 键 值 。 在 执行 删除 
或 清空 操作 后 ， 其 对 应 的 数据 也 会 发 生变 化 ， 这 些 变化 可 以 通过 浏览 器 的 代码 调试 工具 进 
行 侦 测 。 

四 遍历 localStorage 数据 

为 了 查看 localStorage 对 象 保存 的 全 部 数据 信息 , 通常 要 遍历 这 些 数据 。 在 遍历 过 程 中 
需要 访问 localStorage 对 象 的 另外 两 个 属性 一 一 length 与 key。 前 者 表示 localStorage 对 象 中 
保存 数据 的 总 量 ， 后 者 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 〈index) 配合 使 用 ， 
表示 第 几 条 键 名 对 应 的 数据 记录 。 其 中 ， 索 引号 (index) 以 0 值 开 始 ， 如 果 取 第 3 条 键 名 
对 应 的 数据 ，index 值 应 该 为 2。 

圆 ?0.7 js(message board).html, 通过 一 个 简单 留言 板 说 明了 清空 localStorage 数据 和 
遍历 localStorage 数据 的 过 程 ， 效 果 如 图 20.7 所 示 。 


[本 [wj 


这 是 第 0 条 留言 这 是 一 个 简单 留言 板 Sun，03 Jul 2016 11:09:48 GN 
这 是 第 1 条 留言 大 家 说 说 Sun，03 Jul 2016 11:10:08 GIT 
这 是 第 2 条 留言 看 看 谁 发 言 ? Sun，03 Jul 2016 11:10:25 GMT 


图 20.7 js(message board).html 示意 图 


源 代码 如 下 : 


<head> 
<title> 简 单 留言 板 </title> 
<script> 


window.onload=function(){ 
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document .getElementById ("save") .onclick=function(){ 
Var oData=document .getElementById ("message") .value; 
Var oTime=new Date () .getTime(); 
localStorage.setItem(oTime, oData); 
loadstorage ("msg"); 

} 

document .getElementById ("clear") .onclick=function (){ 
localstorage.clear(); 
loadstorage ("msg"); 

} 

document .getElementById ("read") .onclick=function(){ 


loadstorage ("msg"); 


} 
function loadStorage (id) { 
Var oReselt=""; 
for (var iCv=0; iCv < localStorage.length; iCv++) { 
var oValue=localStorage.getItem(localStorage.key (iCv)); 
Var oDate=new Date(); 
oDate.setTime (localStorage.key (icv)); 
Var sDate=oDate.toGMTString (); 
oReselt+="<div>"” + "这 是 第 " + icv + "条 留言 <strong>" + 
localStorage .getItem(localStorage.key(iCcv)) + "</strong> 
<span>" + sDate + "</span></div>"; 
} 
Var oTarget=document .getElementById(id) 
oTarget .innerHTML=oReselt; 
} 
</script> 
</head> 
<body> 
<h1> 简 单 留言 板 </h1> 
<textarea id="message" cols="60" rows="10"></textarea> 
<br/> 
<input type="button" value=" 保 存 " id="save"> 
<input type="button"” value=" 清 空 ” id="clear"> 
<input type="button" value=" 读 取 " id="read"> 
<p id="msg"></p> 
</body> 
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20.4 ”实现 叮 叮 书店 “书籍 分 类 ”页 面 
拖 放 图 书 到 购物 车 


在 叮 叮 书 店 “书籍 分 类 ”页 面 以 拖 放 的 方式 将 选择 的 图 书 放 入 购物 车 ， 同 时 购物 车 接 
收 拖 来 的 商品 数据 ， 自 动 增加 一 条 选择 记录 ,并 显示 商品 的 基本 信息 ， 下 面 实现 这 个 功能 。 
启动 WebStorm， 打 开 叮 叮 书店 项 目 “ 书 籍 分 类 ”页 面 category.html (在 第 14.3 节 建 立 ) 和 
外 部 样式 表 文 件 style.css。 其 主要 步骤 如 下 : 

@ 添加 图 书 列表 图 像 标签 属性 和 购物 车 列表 

为 了 使 所 有 的 图 书 都 具有 可 拖 放 的 功能 ， 在 category.html 页 面 中 为 每 个 图 书 商品 添加 
“draggable” 属 性 ， 并 将 该 属性 的 值 设 为 “true”， 表 示人 允许 拖 放 。 进 入 到 categoryhtml 编辑 
区 ， 将 <section class="list"> 区 域 里 的 <img> 标 签 修改 如 下 : 


视频 讲解 


<img src="images/prodl.jpg" id="img01"” name="list" draggable="true" 
alt="58" title="《HTML5 和 CSS3 实例 教程 》"> 

<img src="images/prod2.jpg" id="img02" name="list" draggable="true" 
alt="98" title=" 《HTML5 权威 指南 》"> 

<img src="images/prod3.jpg" id="img03" name="list" draggable="true" 
alt="48" title=" 《JavaScript 权威 指南 》"> 

<img src="images/selling2.jpg" id="img04" name="list" draggable="true" 
alt="38" title="Hadoop 权威 指南 : 大 数据 的 存储 与 分 析 (第 4 版 ) "> 

<img src="images/selling4.jpg" id="img05" name="list" draggable="true" 
alt="28" title=" 深 度 学 习 [deep learning]"> 

<img src="images/selling5.jpg" id="img06" name="list" draggable="true" 


alt="28" title=" 区 块 链 原理 、 设 计 与 应 用 "> 


将 光标 定位 到 “<section class="list"></section>” 区 域 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代 
码 ， 显 示 购 物 车 列表 。 


<section> 
<h3> 购 物 车 </h3> 
<ul id="ulcart"> 
<li class="lit"> 
<span> 书 名 </span> 
<span> 定 价 </span> 
<span> 数 量 </span> 
<span> 总 价 </span> 
</I> 
</ul> 
</section> 


@ 定义 样式 
切换 到 style.css《〈 样 式 文件 ) 编辑 区 ， 定 义 样式 。 
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/*Chapter20*/ 

#ulcart {width: 100%; margin: 1l10px Opx;} 

#ulcart .lit{background-color:hsl (20,30%,50%); color:hsl(0,0%,100%); 
padding: 5px 0px;} 

#ulcart li{display:flex;flex-flow: row wrap;} 

#ulcart span{text-align: center;} 

#ulcart span:nth-child(1) {flex:3;} 

#ulcart span:nth-child(2) {flex:1;} 

#ulcart span:nth-child(3) {flex:1;} 

#ulcart span:nth-child(4) {flex:1;} 

#ulcart .lic{border-bottom: lpx solid hsl (20,30%,50%);} 


@ 编写 脚本 程序 
入 category.html 编辑 区 , 将 光标 定位 到 <meta name="robots" content= "index,follow"> 
后 面 按 回 车 键 ， 输 入 下 面 的 代码 ， 完 成 内 部 脚本 。 效 果 如 图 20.8 所 示 。 


<script> 
window.onload=function(){ 
// 获 取 全 部 的 图 书 商 品 
Var oDrag=document .getElementsByName ("list"); 
// 遍 历 每 一 个 图 书 商品 
for (Var iCv=0;iCv<oDrag.length;iCv++){ 


// 为 每 一 个 图 书 商品 添加 被 拖 放 元 素 的 dragstart 事件 行为 


oDrag[icv] .addEventListener ("dragstart", function(e){ 
Var oDtf=e.dataTransfer; 
oDtf.setData("text/html",addCcart (this.title, 
this.alt,1)); 
},false); 
} 
Var oCart=document .getElementById ("ulcart"); 
// 添 加 目标 元 素 的 drop 事件 行为 
oCart.addEventListener ("drop", function(e){ 
var oDtf=e.dataTransfer; 
Var sHtml=oDtf.getData("text/html"); 
oCart .innerHTML+=sHtml; 
e.preventDefault (); 
e.stopPropagation (); 
},false); 
// 添 加 页 面 的 dragover 事件 行为 
document .ondragover=function(e) { 
e.preventDefault (); 
} 
// 添 加 页 面 的 drop 事件 行为 
document .ondrop=function (e){ 


e.preventDefault (); 
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} 


二 
// 自 定义 向 购物 车 中 添加 记录 的 函数 
function addCart (a,b,c){ 


Var sHtml="<1li class="'lic'>"; 


sHtml+="<span>"+a+"</span>"; 
sHtml+="<span>"+b+"</span>"; 
sHtml+="<span>"+c+"</span>"; 
sHtml+="<span>"+b*c+"</span>"; 


sHtml+="</1i>"; 
return sHtml; 


} 
</script> 


快速 入 行 前 簿 SN 
中 


成 就 开发 高 手 


以 


| | 中 a 畅销 图 书 


区 块 链 回 深 这 学 习 [deep learning] 


基 讼 壮 习 、 估 化 与 愉 抽 
Et Hadoop 权 威 指南 : 大 数据 的 存储 与 分 
1 图 和 秋 叶 一 起 学 PPT 第 3 版 
LA 
, 一 2 园 深 话 学 习 优化 sir 到 


辐 区 块 链 原理 、 设 计 与 应 用 


回回 回回 回回 回回 


购物 车 KG 合作 伙伴 
书 名 走 价 数量 总 价 oe A 
《HTML5 和 CSS3 实 例 教程 》 58 7 58 清华 大 学 
《JavaScript 权 威 指南 》 48 1 48 ee 
深度 学 习 [deep learning] 28 a 28 版 社 
区 块 链 原理 、 设 计 与 应 用 28 1 28 中 国 社会 科学 出 
1 38 版 社 


Hadoop 权 威 指南 : 大 数据 的 存储 与 分 析 ( 第 38 
4 版 ) 


图 20.8 ”category.html 示意 图 


20.5 小结 


本 章 首先 详细 介绍 了 HTML5 的 Canvas 对 象 , 接 下 来 讨论 了 如 何 实现 元 素 的 拖 放 ， 最 
后 介绍 了 如 何在 客户 端 进行 数据 的 存储 。 
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20.6 “习题 


@ 选择 题 
(1) 对 于 Canvas 对 象 ， 下 列 关于 路 径 绘 制 的 说 法 错误 的 是 〈 )。 
A. 开始 要 创建 路 径 
B. 路 径 创 建 完成 后 需要 关闭 
C. 设 定 绘制 样式 ， 调 用 绘制 方法 
D. 不 必 使 用 图 形 上 下 文 
(2) 在 绘制 图 形 的 时 候 要 用 到 图 形 上 下 文 , 需要 使 用 Canvas 对 象 的 ( ) 方法 获得 。 


A. getContext() B. fillRect() 
C. strokeRect() D. drawImage() 
(3) 元 素 在 拖 放 过 程 中 触发 了 多 个 事件 ，( ) 事件 不 必 进 行 处 理 。 
A. ondragstart B. ondragover 
C. ondrop D. ondragend 
四 简 答题 


(1) Canvas 元 素 通过 JavaScript 脚本 绘图 的 基本 步骤 有 哪些 ? 
(2) 简 述 HTML5 元 素 拖 放 的 实现 过 程 。 
(3) localStorage 对 象 存储 的 数据 能 保存 多 长 时 间 ? 
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BOM (浏览 器 对 象 模型 ) 允许 访问 和 操控 浏览 器 窗口 ，BOM 没有 相关 的 标准 ， 但 所 
有 的 浏览 器 都 支持 。 本 章 首 先 介绍 BOM 的 5 个 对 象 ， 接 下 来 讨论 如 何 确定 元 素 的 大 小 与 
位 置 ， 最 后 详细 介绍 叮 叮 书店 首页 浮动 广告 的 实现 过 程 。 

本 章 要 点 : 

人 BOM 对 象 。 

他 元素 的 大 小 与 位 置 。 


21.1 BOM 对 象 


BOM 是 浏览 器 对 象 模 型 的 简称 , 通过 使 用 BOM 可 以 移动 窗口 、 更 改 状态 栏 文本 和 执 
行 其 他 不 与 页 面 内 容 发 生 直 接 联系 的 操作 。 表 21.1 列 出 了 BOM 的 主要 对 象 。 


表 21.1 BOM 对 象 

描 述 

Window 包含 了 浏览 器 窗口 访问 过 的 URL 
Navigator 包含 了 当前 URL 的 信息 

Screen | 包含 客户 端 显示 屏 的 信息 | | 


21.1.1 Window 对 象 


Window 对 象 表示 一 个 浏览 器 窗口 。 在 客户 端 JavaScript 中 ，Window 对 象 是 全 局 对 象 ， 
可 以 把 Window 对 象 的 属性 和 方法 作为 全 局 变量 和 全 局 函数 来 使 用 。 例 如 下 面 两 个 语句 的 
效果 是 一 样 的 。 


alert (); 
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window.alert (); 


@ Window 对 象 的 属性 
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表 21.2 列 出 了 Window 对 象 的 属性 。 


表 21.2 Window 对 象 的 属性 


属 性 描 述 
closed 返回 窗口 是 否 已 被 关闭 
defaultStatus 设置 或 返回 窗口 状态 栏 中 的 默认 文本 
document Document 对 象 
history History 对 象 
innerheight 窗口 中 文档 显示 区 的 高 度 
innerwidth 窗口 中 文档 显示 区 的 宽度 
location Location 对 象 
name 设置 或 返回 窗口 的 名 称 
navigator Navigator 对 象 
opener 返回 对 创建 此 窗口 的 窗口 的 引用 
outerheight 窗口 的 外 部 高 度 
outerwidth 宽度 
pageXOffset 页 面相 对 于 窗口 显示 区 左上 角 的 义 
pageYOffset 页 面相 对 于 窗口 显示 区 左上 角 的 YY 位置 
screen Screen 对 象 
self 返回 对 当前 窗口 的 引用 ， 等 价 于 window 属性 
status 设置 窗口 状态 栏 的 文本 
window window 属性 等 价 于 self 属性 ， 包 含 对 窗口 自身 的 引用 
screenLeft 
screenTop 只 读 整 数 , 声明 了 窗口 的 左上 角 在 屏幕 上 的 x 坐标 和 yy 坐标。 下、Safari 和 Opera 
screenX 支持 screenLeft 和 screenTop， 而 Firefox 和 Safari 支持 screenX 和 screenY 
screenY 


四 Window 对 象 的 方法 


表 21.3 列 出 了 Window 对 象 的 方法 。 


方 ” 法 


表 21.3 Window 对 象 的 方法 
描 述 


alert(message) 


显示 带 有 一 段 消息 和 一 个 确认 按钮 的 警告 框 。message 表示 要 在 
Window 上 弹出 的 对 话 框 中 显示 的 文本 


blur0 


焦点 从 顶层 窗口 移 开 


clearInterval(id_of setinterval) 


clearTimeout(id_of settimeout) 


取消 由 setInterval0 设 置 的 timeout。id_of setinterval 是 由 setInterval0 
返回 的 ID 值 

取消 由 setTimeoutO 设置 的 timeout 。id of settimeout 是 由 
setTimeout0 返 回 的 ID 值 


close0) 关闭 浏览 器 窗口 
confirm(message) 显示 带 有 一 段 消息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 
focus0 把 键盘 焦点 给 予 一 个 窗口 
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续 表 
方 法 描 述 
SO 相对 窗 口 的 当前 坐标 把 它 移动 指定 的 像素 。 x 为 要 把 窗口 右 移 的 像 
素数 ，?y 为 要 把 窗口 下 移 的 像素 数 
把 窗口 的 左上 角 移 动 到 一 个 指定 的 坐标 。 x 为 窗口 新 位 置 的 x 坐标 ， 
moveTo(x.y) 


上 为 窗口 新 位 置 的 y 坐标 


open(url,name,features,replace) 


打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 


printO 


打印 当前 窗口 的 内 容 


prompt(text,defaultText) 


resizeBy(width,height) 


显示 可 提示 用 户 输入 的 对 话 框 。text: 可 选 ， 在 对 话 框 中 显示 的 文 
本 ; defaultText: 可 选 ， 默 认 的 输入 文本 

按照 指定 的 像素 调整 窗口 的 大 小 。width: 必需 ,使 窗口 宽度 增加 的 
像素 数 ， 可 以 是 正 、 负 数值 ，height: 可 选 ， 使 窗口 高 度 增加 的 像 
素数 ， 可 以 是 正 、 负 数值 


resizeTo(width,height) 


scrollBy(xnum,ynum) 


scrollTo(xpos,ypos) 


setInterval(code,millisec) 


setTimeout(code,millisec) 


requestAnimationFrame(callback) 


把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 。width: 必需 ， 想 要 调整 到 
的 窗口 的 宽度 ，height: 可 选 ， 想 要 调整 到 的 窗口 的 高 度 。 它 们 以 
像素 计 

按照 指定 的 像素 值 来 滚动 内 容 。xnum: 必需 ， 把 文档 向 右 滚动 的 像 
素数 ， ynum: 必需 ， 把 文档 向 下 滚动 的 像素 数 

把 内 容 滚 动 到 指定 的 坐标 。xpos: 必需 ， 要 在 窗口 文档 显示 区 左上 
角 显 示 的 文档 的 x 坐标 ，ypos: 必需 ， 要 在 窗口 文档 显示 区 左上 角 
显示 的 文档 的 y 坐标 

按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。code: 必 
需 ， 要 调用 的 函数 或 要 执行 的 代码 ; millisec: 必需 ， 周 期 性 地 执行 
或 调用 code 之 间 的 时 间 间 隔 ， 以 毫秒 计 

在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 。code: 必需 ， 在 调用 的 
函数 后 要 执行 的 JavaScript 代码 ;millisec: 必需 ， 在 执行 代码 前 需 
等 待 的 毫秒 数 

让 浏览 器 执行 动画 并 请 求 浏览 器 在 下 一 次 重 绘 之 前 调用 指定 的 函 
数 来 更 新 动画 , 回调 的 次 数 通常 是 每 秒 60 次 , callback 为 回调 函数 。 
这 个 方法 用 来 通过 递归 调用 同一 方法 来 不 断 更 新 画面 以 达到 动画 
的 效果 


cancelAnimationFrame(requestID) 


1) open() 方 法 


open() 方 法 用 于 打开 一 个 新 的 浏览 


取消 一 个 先前 通过 调用 requestAnimationFrame0 方 法 添加 到 计划 中 
的 动画 帧 请 求 ，requestID 是 调用 requestAnimationFrame( 方 法 时 返 
回 的 DD 


窗口 或 查找 一 个 已 命名 的 窗口 。 其 语法 如 下 : 


window.open (url, name, features, replace) 


表 21.4 解释 了 open() 方 法 的 主要 参数 。 


2) scrollBy0 方 法 


scrollBy() 方 法 可 以 把 内 容 滚动 指定 的 像素 数 。 其 语法 如 下 : 


scrollBy (xnum, ynum) 
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指 把 文档 向 右 滚动 的 像素 数 ， ynum 必需 ， 指 把 文档 向 下 滚动 的 像 


表 21.4 open() 方 法 的 参数 


参数 描 述 
url 可 选 的 字符 串 ， 声 明了 要 在 新 窗口 中 显示 的 文档 的 URL 
可 选 的 字符 串 ， 声 明了 新 窗口 的 名 称 。 如 果 该 参数 指定 了 一 个 已 经 存在 的 
name 窗口 ， 那 么 open0 方 法 不 再 创建 一 个 新 窗口 ， 只 是 返回 对 指定 窗口 的 引用 。 
在 这 种 情况 下 features 被 忽略 
ee 可 选 的 字符 串 ， 声明 了 新 窗口 要 显示 的 标准 浏览 器 的 特征 。 如 果 省 略 ， 新 
窗口 将 具有 所 有 标准 特征 。 表 21.5 列 出 了 窗口 特征 值 
可 选 的 布尔 值 ， 规 定 了 装载 到 窗口 的 URL 是 在 窗口 的 浏览 历史 中 创建 一 个 
Teplace 新 条 目 ， 还 是 替换 浏览 历史 中 的 当前 条 目 。true 表示 URL 替换 浏览 历史 中 
的 当前 条 目 ; false 表示 URL 在 浏览 历史 中 创建 新 的 条 目 
表 21.5 open() 方 法 的 窗口 特征 值 
参数 描 述 


channelmode=yeslno|1|0 
directories=yeslno|1|0 
fullscreen=yes|no|1|0 


height=pixels 
left=pixels 
location=yeslno|1|0 
menubar=yes|no|1|0 
resizable=yeslnoll|0 
scrollbars=yeslno|1|0 
status=yeslno|1|0 
titlebar=yeslno|1|0 
toolbar=yeslno|1|0 
top=pixels 
width=pixels 


3) resizeBy() 方 法 


resizeBy() 方 法 用 于 根据 指定 的 像素 来 调整 窗口 的 大 小 。 


是 否 使 用 剧院 模式 显示 窗口 ， 默 认为 no 
是 否 添加 目录 按钮 ， 默 认为 yes 
是 否 使 用 全 屏 模式 显示 浏览 器 ， 
须 同 时 处 于 剧院 模式 
窗口 文档 显示 区 的 高 度 
窗口 的 x 坐标 

是 否 显示 地 址 字段 ， 默 认 是 yes 
显示 菜单 栏 ， 默 认 是 yes 
EB 二， 默认 是 yes 


默认 是 no。 注 意 ， 处 于 全 屏 模式 的 窗口 必 


于 显示 标题 
和 否 显 示 浏 览 器 的 工具 村 
口 的 y 坐标 


口 的 文档 显示 区 的 宽度 


其 语法 如 下 : 


resizeBy (width, height) 


其 中 ， 参 数 width 必需 ， 指 要 使 窗口 宽度 增加 的 像素 数 ， 可 以 是 正 、 负 数值 ，height 可 选 ， 


指 要 使 窗口 高 度 增 加 的 像素 数 ， 可 以 是 正 、 负 数值 。 


4) setInterval() 方 法 
setInterval0) 方 法 可 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 
方法 会 不 停 地 调用 函数 , 直到 clearInterval0 被 调 


大 式 。setInterval() 
或 窗口 被 关闭 ，setImterval0 返 回 的 ID 值 


用 作 clearInterval0) 方 法 的 参数 。 其 语法 如 下 : 


setInterval (code,millisec[,"lang"]) 
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其 中 ， 参 数 code 必需 ， 指 要 调用 的 函数 或 要 执行 的 代码 串 ，millisec 必需 ， 指 周期 性 地 执 


行 或 调 
5) 


用 code 之 间 的 时 间 间 隔 ， 以 毫秒 计 。 
setTimeout() 方 法 


setTimeout() 方 法 用 于 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 。 注 意 ，setTimeout() 


方法 只 


执行 code 一 次 。 其 语法 如 下 : 


setTimeout (code,millisec) 


其 中 ， 


参数 code 必需 ， 指 调用 的 函数 或 要 执行 的 


JavaScript 代码 串 ，millisec 必需 ， 指 在 执行 代码 前 需 打开 新 窗口 定制 外 观 


要 等 待 的 毫秒 数 。 ET 


提示 : setTimeoutO 只 执行 code 一 次 。 如 果 要 多 [Eo 大 个] 


改变 URL 


次 调用 ， 需 使 用 setImnterval() 或 者 让 开始 计时 ] | CE 
code 自身 再 次 调用 setTimeout()。 滚动 


贺 21.1 js(Window).html, 说 明 这 是 一 个 段落 。 
了 Window 对 象 的 主要 属性 和 方法 的 


图 21.1 js(Window).html 示意 图 


视频 讲解 使 用 ， 效 果 如 图 21.1 所 示 。 
源 代码 如 下 : 
<head> 


<title>Window 对 象 </title> 
<script> 


window.onload=function(){ 


document .getElementById ("openWin") .onclick=function (){ 


window.open ("http://www.tsinghua.edu.cn/"," blank", "toolbar=yes, 

location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, 

resizable=no, width=400, height=400");} 

document .getElementById("currLocation") .onclick=function(){ 
alert (decodeURI (window.1location));} 

document .getElementById ("newLocation") .onclick=function(){ 
window.location="http://www.tsinghua.edu.cn/";} 

document .getElementById ("resizeWindow") .onclick=function(){ 
window.resizeBy(-100,-100) 7} 

document .getElementById ("timedCount") .onclick=function(){ 
iTimeId=window.setInterval ("timedCount ()",1000);} 

document .getElementById("stopCount") .onclick=function(){ 
window.clearInterval (iTimeId); 
iCount=1;} 

document .getElementById("scrollWindow") .onclick=function(){ 
window.scrollBy (100,100);} 

} 


var iCount=1; 


Var iTimeId; 
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function timedCount (){ 
document .getElementById('counttxt') .value=iCount; 
iCount=iCount+1; 
} 
window.status=" 状 态 栏 信息 "; 
</script></head> 
<body> 
<input type="button" openWin"” value=" 打 开 新 窗口 定制 外 观 " /><br /> 
<input type="button" id="currLocation" value=" 当 前 URL" /><br /> 


<input type="button" id="newLocation" value=" 改 变 URL" /><br /> 
<input type="button" id="resizeWindow"” value=" 调 整 窗口 大 小 " /><br /> 
button" i timedCcount" value=" 开 始 计时 " /> 
<input type="text" id="counttxt" size="3" /> 

<input type="button"” id="stopCount" value=" 停 止 计时 " /><br /> 
<input type="button" id="scrollWindow" value=" 滚 动 " /> 

<p> 这 是 一 个 段落 。</p> 

<br /><br /><br /><br /><br /><br /><br /><br /> 

<p> 这 是 一 个 段落 。</p> 

<DP /><br /><bBr /><br /S<br /Shr /><br JS<br /> 

<p> 这 是 一 个 段落 。</p> 

</body> 


<input typ' 


6) requestAnimationFrame () 方 法 

requestAnimationFrame() 方 法 用 于 在 浏览 器 
中 实现 动画 ， 通 过 递归 调用 同一 方法 来 不 断 更 新 
画面 以 达到 动画 的 效果 。 这 个 方法 是 浏览 器 专门 
为 实现 动画 提供 的 ， 在 运行 时 浏览 器 会 自动 优化 
该 方法 的 调用 ， 如 果 页 面 不 是 激活 状态 ， 动 画 会 
自动 暂停 。 

[ 贺 21.2 js(bouncing Ball).html， 模 拟 了 小 
球 病毒 发 作 的 画面 ， 随 着 时 间 的 增加 ， 小 球 越 来 
越 多 ， 如 图 21.2 所 示 。 

源 代码 如 下 : 


<head> 
<title> 小 球 病毒 </title> 
<style> 
body { margin: 0; overflow: hidden; } 
</style> 
</head> 
<body> 
<canvas></canvas> 
<script> 
// 建 立 Canvas 对 象 
Var oCanvas=document .querySelector('canvas'); 
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Var oContext=oCanvas.getContext ('2d'); 
var iWidth=oCanvas.width=window.innerWidth; 
var iHeight=oCanvas.height=window.innerHeight; 
Var iBallcount=1; 
// 随 机 数 函 数 
function random(min, max) { 
Var num=Math.floor (Math.random() * (max - min)) + min; 
return num; 
| 
// 定 义 Ball 类 ， x,y 为 原点 坐标 ，iMx, iMy 为 重 画 时 原点 坐标 的 增加 值 ，strokecolor 为 
// 圆 边框 颜色 ，iR 为 圆 半径 
function Ball(x, y, iMx, iMy, color,strokecolor, iR) { 
this .x=x; 
this.y=y; 
this.iMx=iMx; 
this.iMy=iMy; 
this.color=color; 
this.strokecolor=strokecolor; 
this.iR=iR; 
} 
// 定 义 Ball 类 的 draw () 方 法 
Ball.prototype.draw=function() { 
oContext .beginPath (); 
oContext .fillstyle=this.color; 
oContext .arc (this.x, this.y, this.iR, 0, 2 * Math.PI); 
oContext .fi11 (); 
oContext .strokestyle=this.strokecolor; 
oContext .stroke () 7 
] 7 
// 定 义 Ball 类 的 update () 方 法 
Ball.prototype.update=function() { 
if ((this.x + this.iR)>=iwidth) { 
this.iMx=- (this.iMx); 


if ((this.x - this.iR)<=0) { 
this.iMx=- (this.iMx); 


if ((this.y + this.iR)>=iHeight) { 
this.iMy=- (this.iMy); 


if ((this.y - this.iR)<=0) { 
this.iMy=- (this.iMy); 

} 

this.x+=this.iMx; 

this.y+=this.iMy; 
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] 7 
// 数 组 balls 存储 ball 对 象 
Var balls=[]; 
// 循 环 ， 不 断 绘制 ball 对 象 
function loop() { 
oContext .fillstyle='rgba (0,0,0,0.25)"'; 
oContext .fillRect (0, 0, iwidth, iHeight); 
while (balls.length < iBallcount) { 
Var iR=random(10, 20); 
Var ball=new Ball( 
// 球 的 位 置 至 少 离 画 布 边缘 一 个 球 的 宽度 ， 以 避免 绘制 错误 
random(0 + iR, iwidth - iR), 
random(0 + iR, iHeight - iR), 
random(-4, 4), 
random(-4, 4), 
"rTIb( TE random(0n 255) 3 7 random(07 255) 0 7 下 
random(0, 255) 4 ") 7 
“TOO + random(0r 255)0 4 "7 Tandom(Or 2255) Tm 
random(0, 255) + ')',iR 
); 
balls.push (ball); 
| 
for (var i=0; i < balls.length; I++) { 
balls[i] .draw(); 
balls[i] .update(); 
} 
// 通 过 递归 调用 同一 方法 来 不 断 更 新 画面 以 达到 动画 效果 
window.requestAnimationFrame (loop); 
} 
loop(); 
function fBallcount (){ 
iBallcount++; 
} 
window.setInterval ("fBallcount ()",1000); 
</script> 
</body> 


21.1.2 ”Navigator 对 象 


Navigator 对 象 包含 客户 端 有 关 浏 览 器 的 信息 ， 所 有 浏览 器 都 支持 该 对 象 。 表 21.6 列 
出 了 Navigator 对 象 的 属性 。 
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表 21.6 ”Navigator 对 象 的 属性 


属 性 描 述 
appCodeName 返回 浏览 器 的 代码 名 
appMinorVersion 返回 浏览 器 的 次 级 版 本 
appName 返回 浏览 器 的 名 称 
appVersion 浏览 器 的 平台 和 版 本 信息 
browserLanguage 浏览 器 的 语言 
cookieEnabled 浏览 器 中 是 否 启用 cookie 的 布尔 值 
cpuClass 浏览 器 所 在 系统 的 CPU 和气 
onLine 系统 是 否 处 于 脱 机 模式 的 布尔 值 
Platform 返回 运行 浏览 器 的 操作 系统 平台 
SystemLanguage 返回 操作 系统 使 用 的 默认 语言 
userAgent 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 值 
userLanguage 返回 操作 系统 的 让 设置 


贺 21.3 js(Navigator) html， 使 用 了 Navigator 对 象 的 主要 属性 ， 效 果 如 图 21.3 所 示 。 


浏览 器 ，Netscape 
浏览 器 版 本 ，5. 0 (Windoms) 
代码 ，Mozilla 

平台 : Win32 


Cookies 启 用 ，true 
浏览 器 用 户 代理 报头 ，Mozilla/5.0 (Windows NT 5.1; 
rv:12.0) Gecko/20100101 Firefox/12.0 


图 21.3 ”js(Navigator).html 示意 图 


源 代码 如 下 : 


<head> 
<title>Navigator 对 象 </title> 
<script> 
window.onload=function (){ 

Var sBrowserName=navigator.appName; 

var fVersion=parseFloat (navigator.appVersion); 

if ((sBrowserName=="Netscape"||sBrowserName=="Microsoft Internet 

Explorer") && (fVersion>=4)){ 

alert ("你 的 浏览 器 已 经 很 棒 了 ! ") ;} 

else{alert ("你 的 浏览 器 需要 升级 了 ! ") ;} 

} 
document .write ("浏览 器 : "+navigator.appName + "<br />"); 
document .write ("浏览 器 版 本 : "+navigator.appVersion + "<br />"); 
document .write ("代码 : "+navigator.appCodeName + "<br />"); 
document .write ("平台 : "+navigator.platform + "<br />"); 
document .write ("Cookies 启用 : "+navigator.cookieEnabled + "<br />"); 
document .write ("浏览 器 用 户 代 理 报头 : "+navigator.userAgent + "<br />"); 
</script> 
</head> 
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<body> 
</body> 


21.1.3 Screen 对 象 


Screen 对 象 包含 有 关 客 户 端 显示 屏幕 的 信息 ,所 有 浏览 器 都 支持 该 对 象 。 表 21.7 列 出 
了 Screen 对 象 的 属性 。 
表 21.7 Screen 对 象 的 属性 


属 性 描 述 
availHeight 的 高 度 -系统 部 件 高 度 
availWidth 屏幕 的 宽度 -系统 部 件 宽度 
colorDepth 返回 目标 设备 或 屏幕 上 的 调 色 板 的 位 深度 
deviceXDPI 返回 显示 器 屏幕 的 每 英寸 水 平 点 数 
deviceYDPI 返回 显示 器 屏幕 的 每 英寸 垂直 点 数 
height 返回 显示 器 屏幕 的 高 度 
pixelDepth 返回 显示 器 屏幕 的 颜色 分 辨 率 
updateInterval 设置 或 返回 屏幕 的 刷新 率 
width 返回 显示 器 屏幕 的 宽度 


21.1.4 Location 对 象 


Location 对 象 包含 有 关 浏 览 器 窗口 当前 文档 的 URL 信息 。 表 21.8 列 出 了 Location 对 
象 的 属性 。 


表 21.8 Location 对 象 的 属性 


描述 
hash 设置 或 返回 从 # 号 开始 的 URL ( 锚 ) 
host 设置 或 返回 主机 名 和 当前 URL 的 端口 号 
hostname | 设置 或 返回 当前 URL 的 主机 名 
href 设置 或 返回 完整 的 URL 
pathname 设置 或 返回 当前 URL 的 路 径 部 分 
port | 设置 或 返回 当前 URL 的 端口 号 
protocol | 设置 或 返回 当前 URL 的 协议 
search 设置 或 返回 从 问号 ?开始 的 URL (查询 部 分 ) 


[ 贺 21.4 js(screen location).html， 使 用 了 Screen 和 Location 对 象 的 主要 属性 ， 根 据 用 
户 屏幕 的 分 辩 率 显示 不 同 的 页 面 。 
源 代码 如 下 : 


<head> 
<title>Screen 和 Location 对 象 </title> 
<script> 
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Var iSwidth=parseInt (screen.width); 


var iSheight=parseInt (screen.height); 
if(iswidth<=800||isheight<=600){ 


window.location.href="screen800600.html"; 


} 


</script> 


</head> 
<body> 


<p> 屏 幕 分 辨 率 大 于 800 X600。</p> 


</body> 


21.1.5 ”History 对 象 


History 对 象 包含 用 户 在 浏览 器 窗口 中 访问 过 的 URL。History 对 象 最 初 设计 来 表示 窗 
口 的 浏览 历史 , 但 出 于 隐私 方面 的 原因 ，History 对 象 不 再 允许 脚本 访问 已 经 访问 过 的 实际 
URL, 还 保持 使 用 的 功能 只 有 back0、forward0 和 go0 方 法 。 表 21.9 列 出 了 History 对 象 的 


属性 和 方法 。 


属性 /方法 
length 
back0) 
forward() 


go(numberlurl) 


表 21.9 History 对 象 的 属性 和 方法 
描 述 
返回 浏览 器 历史 列表 中 的 URL 数量 
加 载 history 列表 中 的 前 一 个 URL 
加 载 history 列表 中 的 下 一 个 URL 
加 载 history 列表 中 的 某 个 具体 页 面 。url 参数 使 用 的 是 要 访问 的 URL， 或 URL 的 子 
串 ，number 参数 使 用 的 是 要 访问 的 URL 在 History 的 URL 列表 中 的 相对 位 置 


下 面 一 行 代码 执行 的 操作 与 单 击 后 退 按 钮 执行 的 操作 一 样 : 
history.back(); 
下 面 一 行 代 码 执行 的 操作 与 单 击 两 次 后 退 按钮 执行 的 操作 一 样 : 


history.go(-2); 


21.2 ”元素 的 大 小 与 位 置 


实际 上 可 以 通过 Style 对 象 的 style.width、style.height、style.left 和 style.top 获得 元 素 
的 大 小 与 位 置 ， 但 这 种 方法 有 一 些 缺 陷 : Style 对 象 的 大 小 与 位 置 属 性 返回 的 是 字符 串 ， 除 
了 数字 外 还 带 有 单位 px; 如 果 访 问 的 元 素 没 有 设置 宽 和 高 属性 ， 则 返回 的 值 是 空 字符 串 或 
0; 若 元 素 的 定位 方式 是 静态 定位 ， 则 样式 属性 left 和 top 无 效 。 

所 以 在 JavaScript 编程 中 一 般 使 用 HIMLElement 对 象 的 长 度 属 性 获取 元 素 的 大 小 与 位 
置 ， 然 后 使 用 Style 对 象 的 长 度 属性 设置 元 素 的 大 小 与 位 置 。 
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@ 元 素 的 大 小 


HTMLElement 对 和 象 的 clientWidth 和 clientHeight 属性 给 出 了 元 素 的 可 视 部 分 的 宽度 和 
高 度 。 对 于 块 级 元 素 ， 当 元 素 设置 宽 和 高 时 ， 返 回 元 素 所 设置 的 宽度 和 高 度 加 上 内 边 距 
(padding)， 这 一 点 几乎 所 有 浏览 器 都 达成 一 致 ， 当 元 素 没有 设置 宽 和 高 时 ，Google 浏览 器 
和 Firefox 浏览 器 返回 元 素 的 实际 大 小 ， 正 返回 0， 当 有 滚动 条 时 ， 只 返回 可 见 区 域 大 小 ， 
即 不 包括 滚动 条 。 对 于 行内 元 素 ， 正 和 Firefox 都 返回 0，Google 返回 了 一 个 看 似 理想 的 
数字 。 

HTMLElement 对 象 的 offsetWidth 和 offsetHeight 属性 给 出 了 元 素 在 页 面 中 实际 所 占 的 
区 域 大 小 ， 包 括 所 设置 的 宽 、 高 加 上 边框 和 内 边 距 ， 当 有 滚动 条 时 还 会 算 上 滚动 条 。 对 于 
设置 了 宽 和 高 的 块 级 元 素 ， 几 乎 没有 浏览 器 兼容 问题 ; 如 果 没 有 设置 宽 、 高 或 者 行内 元 素 ， 
不 同 浏览 器 有 自己 的 一 套 标准 〈 可 以 肯定 的 是 这 两 个 属性 返回 的 仍然 是 该 元 素 占据 的 空间 
大 小 ， 只 不 过 会 因 字 体 和 空格 的 默认 大 小 而 不 同 )，Firefox 浏览 器 有 个 BUG 。 

HTMLElement 对 象 的 scrollWidth 和 scrollHeight 给 出 了 当 属 性 overflow 的 值 设置 为 
visible 时 的 元 素 的 总 宽度 和 高 度 。 如 果 这 个 宽度 和 高 度 大 于 clientWidth 和 clientHeight， 该 
元 素 就 需要 滚动 条 。 该 属性 有 很 多 的 Bug， 所 以 在 具体 应 用 时 用 处 很 少 。 

HTMLElement 对 象 的 clientLeft 和 clientTop 给 出 了 元 素 的 边框 宽度 ， 只 能 取得 设置 在 
元 素 上 的 左边 框 和 上 边框 的 粗细 ， 没 有 返回 右边 和 下 边 的 边框 宽度 。 

@ 元素 的 位 置 

HTMLElement 对 象 的 offsetLeft 和 offsetTop 返回 元 素 在 页 面 中 相对 于 父 元 素 的 坐标 ， 
当 元 素 自身 有 外 边 距 (margin) 时 还 会 加 上 外 边 距 。 对 于 没有 采用 定位 的 块 级 元 素 , offsetLeft 
与 offsetTop 属性 将 返回 其 自身 的 外 边 距 加 上 父 元 素 的 内 边 距 。 

HTMLElement 对 象 的 offsetParent 属性 返回 元 素 的 相对 定位 的 父 元 素 ， 即 父 元 素 是 包 
含 块 如果 父 元 素 不 是 包含 块 , 则 正 认为 offsetParent 是 父 节点 ,而 其 他 浏览 器 认为 是 body。 

HTMLElement 对 象 的 scrollTop 和 scrollLeft 分 别 给 出 元 素 已 经 滚动 的 距离 (像素 值 ， 
被 隐藏 在 内 容 区 域 上 方 / 左 侧 的 像素 数 )。 在 设置 这 些 属性 的 时 候 页 面 深 动 到 新 的 坐标 。 对 
于 整个 页 面 的 滚动 条 , 大 多 数 浏 览 器 取 HTMLDocument 对 象 documentElement 的 scrollLeft 
与 scrollTop 属性 ， 有 的 会 将 页 面 的 滚动 条 视 为 document.body。 

圆 ?1.5 js(HTMLElementsize) html， 说 明了 元 素 大 小 与 位 置 属性 的 使 用 。 其 中 ，<div 
id="a"> 是 包含 元 素 ， 宽 、 高 为 300px 和 200px， 边 框 为 2px， 内 边 距 为 10px， 它 包含 了 <div 
id="b"> 元 素 ， 宽 、 高 为 200px 和 100px， 边 框 为 2px， 内 边 距 为 10px， 外 边 距 为 10px。 当 
页 面 载 入 完成 时 ， 调 用 程序 显示 这 些 元 素 的 大 小 与 位 置 ， 由 于 <div id="a"> 是 包含 元 素 但 不 
是 包含 块 ， 所 以 <div id="b"> 的 offsetParent 是 body， 并 没有 显示 <div id="a"> 的 大 小 与 位 置 
信息 ， 结 果 如 图 21.4 所 示 。 

源 代码 如 下 : 


<head> 
<title>HTMLElement 元 素 大 小 </title> 
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<style> 

#a{ border:2px solid;width:300px;height:200px;padding:10px;} 

#b{ border:2px solid;width:200px;height:100px; 
padding:10px;margin:10px;} 

</style> 

<script> 

function GetPosition (oglement){ 
Var sStr=""; 
sStr+=" 元 素 标签 :"+oElement .tagName+ ",id:"+oElement .id+"<br /> 左边 距 
offsetLeft:" + oglement .offsetLeft + ", 上边 距 offsetTop:" + 
oElement .offsetTop+ ", 宽 offsetWidth:" + oElement.offsetWidth+ " 


offsetHeight:" + oElement.offsetHeight+"<br />"; 
oElement = oElement .offsetParent; 
while (oglement!==null){ 
sStr+=" 元 素 标签 :"+oElement .tagName+ ", id:"+oElement .id+ "<br /> 左边 
距 offsetLeft:" + oElement.offsetLeft + ", 上 边 距 offsetTop:" + 
oElement .offsetTop+ ", 宽 offsetWidth:" + oElement.offsetWidth+ ", 
高 offsetHeight:" + oElement.offsetHeight+"<br />"; 
oElement = oElement .offsetParent; 
} 
sStr+=" 元 素 标签 :"+document .documentElement .tagName+ ",id:"+document 
.documentElement.id+ "<br /> 左边 距 offsetLeft:" + document 
.documentElement .offsetLeft + ", 上 边 距 offsetTop:" + document 
.documentElement .offsetTop+ ", 宽 offsetWwidth:" + document 
.documentElement .offsetWidth+ ", 高 offsetHeight:" + document 
.documentElement .offsetHeight; 
.document .write (sstr); 
h 
</script></head> 
<body> 
<div id="a"><div id="b"></div></div> 
<script> 
GetPosition (document .getElementById("b")); 
</script> 


</body> 


修改 样式 ， 将 <div id="a"> 定 义 为 包含 块 ， 添加 定位 属性 position:relative;， 则 执行 结果 
如 图 21.5 所 示 。 
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元 素 标签 :DIV, id:b 

左边 距 offsetLeft:20, 上 边 距 offsetTop:20 
宽 offsetWidth:224, 高 offsetHeight:124 
元 素 标签 :DIV, id:a 

左边 距 offsetLeft:8, 上 边 距 offsetTop:8 
宽 offsetWidth:324, 高 offsetHeight:224 
元 素 标签 :BODY, id: 

左边 距 offsetLeft:0, 上 边 距 offsetTop:0 
宽 offsetWidth:349, 高 offsetHeight:224 
元 素 标签 :HTIL, id: 

左边 距 offsetLeft:0, 上 边 距 offsetTop:0 
宽 offsetWidth:365, 高 offsetHeight:240 


元 素 标签 :DIV, id:b 

左边 距 offsetLeft:30, 上 边 距 offsetTop:30 
宽 offsetWidth:224, 高 offsetHeight:124 
元 素 标签 :BODY, id: 

左边 距 offsetLeft:0, 上 边 距 offsetTop:0 
宽 offsetWidth:630, 高 offsetHeight:224 
元 素 标签 :HTIL, id: 
左边 距 offsetLeft:0, 上 边 距 offsetTop:0 
宽 offsetWidth:646, 高 offsetHeight:240 


图 21.4 js(HTMLElement).html 示意 图 1 图 21.5 js(HTMLElement).html 示意 图 2 


加 


21.3 ”了 叮 叮 书店 首页 的 浮动 广告 


启动 WebStorm， 打 开 叮 叮 书店 项 目 首页 index.html 和 外 部 样式 表 文 件 。 ”视频 讲解 
style.css， 在 首页 内 容 区 两 侧 的 视 口 边 位 置 添加 浮动 广告 。 操 作 步 又 如 下 : 

@ 在 首页 添加 浮动 广告 文档 

打开 首页 index.html,， 进入 编辑 区 , 将 光标 定位 到 <body> 按 回 车 键 , 输入 下 面 的 代码 。 


<div id="adv-left"><a href="#"><img src="images/adv1.gif" alt=" 广 告 " /> 

</a></div> 

<div id="close-left"><img src="images/closel.jpg" alt=" 关 闭 " /></div> 

<div id="adv-right"><a href="#"><img src="images/advl.gif" alt=" 广 告 " /> 

</a></div> 

<div id="close-right"><img src="images/closel.jpg" alt=" 关 闭 " /></div> 

四 定义 样式 

切换 到 style.css (样式 文件 ) 编辑 区 , 为 <div id="adv-left">、<div id="adv-right">、<div 
id="close-left"><div id="close-right"> 定 义 样式 。 

/*Chapter21*/ 

/* 使 用 vw 和 vh 将 图 像 固定 在 顶部 */ 

#adv—left, #adv-right {position:fixed;width:80px;height:80px;visibility: 

hidden;} 

#adv-left{left: Ovw;top: Ovh;} 

#adv-right{top: Ovh;right:0vw;} 

#close-left,#close-right {position:fixed;width:13px;height:13px;visibility: 

hidden;margin-top: -4px;} 
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#close-left{left: 67px;top: Ovh;} 
#close-right{top: Ovh;right:0vw;} 
/* 大 于 800px 宽度 时 显示 广告 */ 
emedia screen and (min-width: 800px) { 
#adv-left, #adv-right,#close-left,#close-right{visibility: visible;} 
} 


在 main.js 里 为 window.onload 事件 添加 如 下 程序 。 


if (document .getElementById ("close-left") !=null) {document 
.getElementById ("close-left") .onclick=function() {advcloseleft ();}} 
if (document .getElementById ("close-right") !=null) {document 
.getElementById("close-right") .onclick=function() {advcloseright ();}} 


在 mainjs 里 添加 函数 。 
/#* 关 闭 广告 */ 
function advcloseleft (){ 
document .getElementById ("adv-left") .style.display="none"; 
document .getElementById ("close-left") .style.display="none";} 
function advcloseright (){ 


document .getElementById ("adv-right") .style.display="none"; 
document .getElementById ("close-right") .style.display="none";} 


其 显示 效果 如 图 21.6 所 示 。 


特刊 降价 ”联系 我 们 。 ”关于 我 们 


图 21.6 叮 叮 书店 首页 广告 示意 图 


21.4 ”小结 


本 章 主要 介绍 了 BOM 的 Window、Navigator、Screen、Location 和 History 5 个 对 象 ， 
接 下 来 讨论 了 如 何 确 定 元 素 的 大 小 与 位 置 ， 最 后 详细 介绍 了 叮 叮 书店 首页 浮动 广告 的 实现 
过 程 。 


21.5 “习题 


@ 选择 题 
(1) 窗口 可 以 用 ( ) 方法 获得 焦点 。 
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A. focus() B. alert() C. prompt() D. blur0 
(2) 要 在 页 面 的 状态 栏 中 显示 “已 经 选中 该 文本 框 ”， 下列 JavaScript 语句 正确 的 是 
( » 
A. window.status=" 已 经 选中 该 文本 框 " 
B. document.status" 已 经 选中 该 文本 框 " 
C. window.screen=" 已 经 选中 该 文本 框 " 
D. document.screen=" 已 经 选中 该 文本 框 " 
(3) History 对 和 象 的 ) 方法 用 于 加 载 历史 列表 中 的 下 一 个 URL 页 面 。 
A. next() B. back() C. forward() D. go(-1) 
四 简 答题 
(1) 怎样 实现 在 标题 栏 和 状态 栏 上 动态 显示 当前 时 间 的 效果 ? 
(2) 在 实际 应 用 中 如 何 确 定 元 素 的 大 小 和 位 置 ? 
(3) 比较 setInterval()、setTimeout() 和 requestAnimationFrame() 3 个 方法 有 什么 区 别 和 
作用 。 
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传统 的 网 页 如 果 需 要 更 新 内 容 ， 必 须 重 载 整个 页 面 ， 也 就 是 当 服务 器 响应 处 理 客户 端 
请 求 时 客户 端 只 能 空闲 等 待 ， 哪 怕 从 服务 器 端 只 需要 得 到 一 个 数据 都 要 返回 一 个 完整 的 页 
面 ， 这 样 浪费 了 大 量 的 时 间 和 带宽 ， 交 互 体验 差 。 使 用 Ajax 的 局 部 刷新 和 异步 加 载 可 以 有 
效 地 解决 这 些 问题 .本 章 首先 介绍 Ajax 的 基础 原理 , 接 下 来 介绍 如 何 利 用 XMLHttpRequest 
对 象 实现 Ajax 请 求 、 响 应 过 程 ， 最 后 介绍 了 JSON 的 定义 和 使 用 。 

本 章 要 点 : 

< 人 Ajax。 

< JSON。 


22.1 Ajax 


Ajax 是 Asynchronous JavaScript And XML (异步 JavaScript 和 XML ) 的 简称 ，Ajax 不 
是 一 种 新 的 编程 语言 ， 而 是 一 种 用 于 创建 更 好 、 更 快 以 及 交互 性 更 强 的 Web 应 用 技术 。 使 
用 Ajax 通过 后 台 与 服务 器 进行 少量 的 数据 交换 可 以 实现 网 页 的 异步 更 新 , 即 无 须 重新 加 载 
整个 页 面 ， 能 够 使 网 页 内 容 部 分 更 新 。 传 统 的 网 页 如 果 需 要 更 新 内 容 ， 则 必须 重 载 整个 页 
面 。Ajax 的 原理 如 图 22.1 所 示 。 

Ajax 的 主要 特点 如 下 : 

(1) Ajax 能 够 实现 异步 交互 ， 局 部 刷新 ; 

(2) Ajax 能 够 减少 服务 器 压力 ; 

(3) Ajax 能 够 提高 用 户 体验 。 

2005 年 ，Google 通过 Google Suggest 项 目 使 得 Ajax 流行 起 来 。 


| 448 


第 22 章 Ajax 与 JSON 9 


客户 端 浏览 器 时 加 过 加 
1 

页 面 

数 
本 JavaScript XHR 据 
A a | Web Oo 库 
新 服 服 
| 他 务 | | 多 
容 H5、CSS XML、JSON 器 器 


图 22.1 Ajax 原理 图 


22.2 。 XMLHttpRequest 对 象 


XMLHttpRequest 对 象 是 Ajax 的 基础 ,简称 XHR， 用 于 在 后 台 与 服务 器 交换 数据 。 使 
用 XMLHttpRequest 对 象 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 对 网 页 的 部 分 内 容 进行 更 新 。 
所 有 的 浏览 器 都 支持 XMLHttpRequest 对 象 (IE5 和 IE6 使 用 ActiveXObject)。 


22.2.1 创建 XMLHttpRequest 对 象 


创建 XMLHttpRequest 对 象 的 语法 如 下 : 
variable=new XMLHttpRedquest () 
标准 浏览 器 (IE7 及 以 上 、Firefox、Chrome、Safari 以 及 Opera ) 内 都 建 有 XMLHttpRequest 
对 象 。 
IE5 和 正 6 使 用 ActiveX 对 象 创建 XMLHttpRequest 对 象 : 
variable=new ActivexObject ("Microsoft .XMLHTTP") 
用 户 可 以 用 下 面 的 代码 创建 所 有 浏览 器 都 支持 的 XMLHttpRequest 对 象 。 
var XHR; 
if (window.XMLHttpRequest) 
{// 其 他 浏览 器 
XHR=new XMLHttpRequest (); 


} 
else 
{//IE5 和 IE6 浏览 器 
XHR=new ActiveXxObject ("Microsoft .XMLHTTP"); 
} 
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22.2.2 ” XMLHttpRequest 请 求 


如 果 XMLHttpRequest 对 象 向 服务 器 发 送 请 求 ， 需 要 使 用 XMLHttpRequest 对 象 的 
open()、send() 和 setRequestHeader() 方 法 。 表 22.1 列 出 了 XMLHttpRequest 对 象 的 请 求 方法 。 
表 22.1 XMLHttpRequest 对 象 的 请 求 方法 


方 法 描 述 
规定 请 求 的 类 型 、URL 以 及 是 否 异 步 处 理 请 求 
method: 请 求 的 类 型 ，GET 或 POST 
penton) url: 文件 在 服务 器 上 的 位 置 
async: true (异步 ) 或 false (同步 ) 
将 请 求 发 送 到 服务 器 
send(string) 


string: 仅 用 于 POST 请 求 
向 请 求 添加 HTTP 头 
header: 规定 头 的 名 称 
value: 规定 头 的 值 


setRequestHeader(header,value) 


open() 方 法 中 的 method 参数 规定 请 求 类 型 ， 即 GET 或 POST。 一 般 来 说 ,在 大 部 分 情 
况 下 使 用 GET， 简 单 、 快 捷 。 如 果 遇 到 以 下 情况 ， 则 需要 使 用 POST: 

(1) 无 法 使 用 缓存 文件 ， 这 种 情况 需要 更 新 服务 器 上 的 文件 或 数据 库 ; 

(2) 向 服务 器 发 送 大 量 数据 ， 

(3) 发 送 包 含 特殊 或 未 知 字符 。 

例如 直接 向 服务 器 发 送 GET 请 求 获得 数据 : 

XHR.open ("GET", "Ajax-response.jsp",true); 

XHR.send (); 

Ajax-response.jsp 是 服务 器 端 接收 请 求 并 处 理 的 脚本 程序 。 

为 了 保证 每 次 得 到 的 结果 是 不 同 的 ， 而 不 是 缓存 里 相同 的 结果 ， 需 要 在 URL 中 添加 

-个 唯一 的 ID: 
XHR .open ("GET", "Ajax-response.jsp?t="+ Math.random() ,true) ; 
XHR.send () 


如 果 向 服务 器 发 送 GET 请 求 , 同时 发 送 数据 , 这样 服 务 器 端 就 可 以 根据 接收 的 数据 有 
条 件 地 进行 处 理 ， 需 要 在 URL 后 面 添加 发 送 的 数据 : 


XHR.open ("GET", "Ajax-response.jsp?name= 张 三 ", true); 
XHR.send(); 


如 果 向 服务 器 发 送 POST 请 求 ， 同 时 发 送 像 表 单 的 POST 方式 打包 数据 ， 需 要 使 用 
setRequestHeader() 方 法 添加 HTTP 头 ， 然 后 在 send0 方 法 中 使 用 string 参数 发 送 数 据 : 


XHR.open ("POST", "Ajax-response.jsp",true); 
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XHR. setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); 
XHR. send ("name= 张 三 &age=22"); 


四 异步 

open() 方 法 中 的 async 参数 规定 请 求 是 异步 还 是 同步 。 如 果 值 为 tue， 表 示 异 步 ， 
JavaScript 会 在 请 求 服务 器 的 同时 继续 执行 ,这 样 能 够 提高 系统 的 运行 效率 ;如 果 值 为 false， 
表示 同步 ，JavaScript 会 等 到 服务 器 响应 就 绪 才 继续 执行 ， 若 服务 器 繁忙 或 缓慢 ， 应 用 程序 
就 会 挂 起 或 停止 。 在 一 般 情 况 下 都 用 true。 


22.2.3 XMLHttpRequest 响应 


用 户 可 以 使 用 XMLHttpRequest 对 象 的 responseText 或 responseXML 属性 获得 来 自 服 
务 器 的 响应 数据 。 

XMLHttpRequest 对 象 的 readyState 属性 存 有 XMLHttpRequest 的 状态 信息 ， 当 
readyState 改变 时 会 触发 onreadystatechange 事件 。 

表 22.2 列 出 了 XMLHttpRequest 对 象 的 响应 属性 。 


表 22.2 XMLHttpRequest 对 象 的 响应 属性 


属 性 描 述 

TesponseText 获得 字符 串 形式 的 响应 数据 

responseXML 获得 XML 形式 的 响应 数据 

readyState 存 有 XMLHttpRequest 的 状态 ， 从 0 到 4 发 生变 化 
0: 请 求 未 初始 化 ， 未 调用 open0 方 法 
1: ， 服 务 器 连接 已 建立 ， 未 调用 send0 方 法 
2: 请 求 已 接收 
3: 请 求 处 理 中 
4: 请 求 已 完成 ， 且 响应 已 就 绪 ， 返 回 数据 

status 200: OK 


404: 未 找到 页 面 


当 服 务 器 响应 好 (数据 处 理 完成 ) 之 后 , 用 户 可 以 在 onreadystatechange 
事件 中 编写 函数 执行 需要 的 任务 。 当 readyState 等 于 4 且 status 为 200 时 表 
示 响 应 已 就 绪 。 

辆 ]2.1 js(Ajax-get).html， 模 拟 了 Ajax 请 求 数据 的 传输 过 程 ， 当 单 
击 “ 姓 名 ”按钮 时 通过 Ajax 获取 姓名 信息 并 显示 。 

源 代码 如 下 : 

<head> 

<title>Ajax 请 求 </title> 
<script> 


视频 讲解 


window.onload=function(){ 
document .getElementById ("button") .onclick=function(){ 
Var XHR; 
if (window.XMLHttpRequest) 
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XHR=new XMLHttpRequest (); 
else 
XHR=new ActiveXObject ("Microsoft.XMLHTTP"); 
E 
XHR.onreadystatechange=function() 
4 
if (XHR.readyState==4 && XHR.status==200) 
下 


document .getElementBYId ("data-conversion") 


-innerHTML=XHR.responseText; 


3 
XHR.open ("GET", "js (Ajax-response) .html", true); 
XHR.send () 7 


|。 
</script> 
</head> 
<body> 
<button type="button" id="button"> 姓 名 </button> 
<span id="data-conversion"></span> 
</body> 


js(Ajax-response).html 是 模拟 服务 器 处 理 完结 果 的 页 面 。 
源 代码 如 下 : 


<head> 
<title>Ajax 响应 </title> 
</head> 
<body> 
ka 
</body> 


提示 : js(Ajax-get).html 需要 在 Web 服务 器 运行 时 才能 显示 结果 ， 也 可 以 在 WebStorm 
编辑 环境 下 调用 浏览 器 显示 结果 。 
如 果 async=false, 不 要 编写 onreadystatechange 事件 函数 ， 把 代码 放 到 send(O) 语 句 后 面 
即 可 。 


XHR.open ("GET", "js (Ajax-—response) .html", false); 
XHR.send (); 


document .getElementById ("data-conversion") .innerHTML=XHR.responseText; 


22.3 JSON 


JSON 是 JavaScript Object Notation (JavaScript 对 象 表示 法 ) 的 简称 。JSON 是 轻 量 级 
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的 文本 数据 交换 格式 ， 能 够 自我 描述 ， 更 易 理解 。JSON 虽然 使 用 JavaScript 语法 来 描述 数 
据 对 象 ， 但 JSON 独立 于 语言 和 平台 ， 支 持 许多 不 同 的 编程 语言 。 

JSON 和 XML 类 似 ， 是 纯 文本 ， 具 有 层级 结构 ， 可 以 通过 JavaScript 进行 解析 ， 使 / 
Ajax 进行 传输 。 那 么 为 什么 使 用 JSON 进行 数据 传输 而 不 是 XML? 大 家 对 照 使 用 这 两 种 
方式 所 需要 的 步骤 就 可 以 知道 。 

对 于 Ajax 应 用 程序 来 说 ， 如 果 使 用 XML 需要 3 个 步骤 。 

(1) 读 取 XML 文档 ; 

(2) 使 用 XML DOM 循环 遍历 ; 

(3) 读 取 值 并 存储 在 变量 中 。 

如 果 使 用 JSON 只 需要 两 个 步骤 。 

(1) 读 取 JSON 字符 串 ; 

(2) 用 eval0 处 理 JSON 字符 串 。 


22.3.1 JSON 的 语法 


JSON 语法 是 JavaScript 对 象 表示 法 语法 的 子 集 。 

JSON 语法 的 规则 如 下 : 

。 数据 在 名 称 / 值 对 中 ; 

。 数据 由 去 号 分 隔 ; 

。 花 (大) 括号 保存 对 象 ; 

。 方 括号 保存 数组 。 

JSON 数据 的 书写 格式 是 “名 称 / 值 对 ”。 名 称 / 值 对 包括 名 称 〈 需 要 括 在 双 引 号 中 )， 后 
面 是 分 隔 符 〈 冒 号 )， 然 后 是 值 ， 例 如 : 


"name":" 张 三 " 


@ JSON 值 

JSON 值 可 以 是 数字 (整数 或 浮 点 数 ) 字符 串 ( 括 在 双 引 号 中 ) 逻辑 值 (tmue 或 false)、 
数组 〈 在 方 括号 中 )、 对 象 〈 在 花 括 号 中 ) 和 Null。 

@ JSON 对 象 

JSON 对 象 写 在 花 括 号 中 ， 对 象 可 以 包含 多 个 名 称 / 值 对 ， 例 如 : 


{"name":" 张 三 ", "age":22} 


全 JSON 数组 
JSON 数组 写 在 方 插 号 中 ， 数 组 可 以 包含 多 个 对 象 ， 例 如 : 


上 

"student":[ 

tf"name™:" 张 三 ", "age":22}, 
{"name":" 李 四 ", "age":20}, 
Fane "Tagen23. 
] 
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} 


在 上 面 的 例子 中 ，student 对 象 是 包含 3 个 对 象 的 数组 ， 每 个 对 象 代表 一 条 关于 某 个 学 
生 《〈 姓 名 和 年 龄 ) 的 记录 。 


22.3.2 ”JSON 的 使 用 


因为 JSON 使 用 JavaScript 语法 ， 所 以 在 JavaScript 中 可 以 直接 处 理 JSON 数据 。 例 如 
可 以 直接 访问 student 对 象 数组 中 的 第 1 项 : 

student [0] .name; 
返回 的 值 是 : 

张 三 
也 可 以 直接 修改 数据 : 

student [0] .name=" 起 一 "; 

@ 把 JSON 文本 转换 为 JavaScript 对 象 

JSON 最 常见 的 用 法 是 从 Web 服务 器 上 读 取 JSON 数据 ,将 JSON 数据 转换 为 JavaScript 
对 象 ， 然 后 使 用 该 数据 。 

eval0) 函 数 可 以 将 JSON 文本 转换 为 JavaScript 对 象 ， 但 必须 把 文本 放 在 括号 中 ， 以 避 
免 产 生 语 法 错误 。 其 语法 如 下 : 

Var obj=eval (" ("+txt+")"); 

圆 22.2 js(Ajax-JSON).html， 模 拟 了 Ajax 请 求 JSON 数据 的 传输 过 
程 ， 当 单 击 “请 求 数据 ”按钮 时 通过 Ajax 获取 姓名 和 年 龄 信息 并 显示 。 

源 代码 如 下 : 


<head> 


视频 讲解 


<title>Ajax 请 求 JSON 数据 的 传输 过 程 模拟 </title> 
<script> 
window.onload=function(){ 


document .getElementById ("button") .onclick=function(){ 
var XHR; 
if (window.XMLHttpRequest) 
| 
XHR=new XMLHttpRequest () 
下 
else 
和 
XHR=new ActiveXObject ("Microsoft .XMLHTTP"); 
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XHR .onreadystatechange=function() 
是 
if (XHR.readyState==4 && XHR.status==200) 
下 
/*# 静 态 页 面 模拟 实现 后 台 返 回 数据 ，responseText 返回 的 是 整个 文 
档 ， 包 括 标签 ， 需 要 元 素 的 innerHTML 属性 进行 解析 */ 
document .getElementById( "data-conversion"). 
innerHTML=XHR.responseText; 
/* 然 后 再 获取 真正 的 数据 */ 
var 5sStr=document .getElementByYyId ("data- conversion") 
-innerText; 
/* 转 换 为 JSON 对 象 */ 
var dataObj=eval (" ("+sStr+")"); 
document .getElementById ("json") .innerHTML=" 姓 名 : 
"+dataobj .name+" 年 龄 : "+dataobj .age; 
} 
} 
XHR.open ("GET", "js (Ajax-JSON-response) .html", true); 
XHR.send(); 
上 
} 
</script> 
<style> 
#data-conversion{color:hsl (0,0%,100%); } 
</style> 
</head> 
<body> 
<button type="button" id="button"> 请 求 数据 </button> 
<div id="data-conversion"></div> 
<div id="json"></div> 


</body> 
js(Ajax-JSON-response).html 是 模拟 服务 器 处 理 完结 果 的 页 面 。 源 代码 如 下 : 
<head> 


<title>Ajax-JSON</title> 


</head> 

<body> 

{"name":" 张 三 ", "age":22} 

</body> 

提示 : eval0 可 以 编译 执行 任何 JavaScript 代码 ， 会 有 潜在 的 安全 问题 。 
四 JSON 解析 器 


使 用 JSON 解析 器 将 JSON 转换 为 JavaScript 对 象 比较 安全 ，JSON 解析 器 只 能 识别 
JSON 文本 ， 不 会 编译 脚本 ， 并 且 速 度 更 快 。 
较 新 的 浏览 器 和 最 新 的 ECMAScript 标准 中 均 包 含 了 原生 对 JSON 的 支持 , JSON 包含 
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以 下 两 个 方法 。 
。 parse(): 以 文本 字符 串 形 式 接受 JSON 对 象 作为 参数 ， 并 返回 相应 的 对 象 。 
。 stringify(): 接收 一 个 对 象 作为 参数 ， 返 回 一 个 对 应 的 JSON 字符 串 。 
在 实例 js(Ajax-JSON).html 中 ， 将 语句 : 


var dataobj=eval (" ("+sStr+")"); 


符 换 为 


var dataobj=JSON.parse (sstr); 


就 可 以 使 用 JSON 解析 器 将 JSON 转换 为 JavaScript 对 象 。 


22.4 小结 


本 章 介 绍 了 Ajax 的 工作 原理 以 及 利用 XMLHttpRequest 对 象 实现 Ajax 请 求 、 响 应 的 
详细 过 程 ， 最 后 介绍 了 JSON 的 定义 和 使 用 。 


22.5 “习题 


@ 选择 是 

(1) 关于 Ajax 的 说 法 ， 下 面 选项 中 错误 的 是 〈 )。 
A. 异步 交互 B. 局 部 刷新 
C. 减少 服务 器 压力 D. 减少 用 户 体验 


(2) 有 一 个 XMLHttpRequest 对 象 XHR 向 服务 器 发 送 请求 获 得 数据 ， 下 面 语句 中 不 需 
要 编写 onreadystatechange 事件 函数 的 是 〈 5 
A. XHR.open("GET","Ajax-response.jsp.,true); 
B. XHR.open("GET","Ajax-response.jsp?t="+ Math.random(),true); 
C. XHR.open("GET","Ajax-response.jsp?name= 张 三 ",false): 
D. XHR.open("POST","Ajax-response.jsp,true); 
(3) 下 面 JSON 对 象 中 写法 正确 的 是 (  )。 
A.， {name:" 张 三 ",age:24,phone:"1234567"} 
B.， f{"name":" 张 三 ",age:24,"phone":"1234567"} 
C.，f{"name":" 张 三 ":"age":24;"phone":"1234567"} 
D.，f{"name":" 张 三 ","age":24,"phone":"1234567"} 
@ 简 答 题 
(1) XMLHttpRequest 对 象 如 何 向 服务 器 发 送 请 求 ? 如 何 获得 服务 器 的 响应 数据 ? 
(2) XMLHttpRequest 对 象 的 readyState 响应 属性 有 几 种 状态 ? 
(3) 为 什么 使 用 JSON 解析 器 定义 JSON 对 象 ? 
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使 用 JavaScript 脚本 编写 程序 有 时 过 于 烦琐 ， 而 且 当 实现 一 些 特殊 效果 时 程序 代码 量 
较 大 ， 有 一 定 的 难度 ， 用 户 可 以 使 用 JavaScript 框架 去 解决 这 些 问 题 ，jQuery 是 使 用 最 多 
的 一 个 轻 量 级 JavaScript 框架 。 本 章 首先 介绍 jQuery 的 语法 基础 ， 接 下 来 讨论 jQuery 特效 
及 动画 的 实现 过 程 和 jQuery 如 何 对 HTML 元 素 进行 操作 ， 最 后 详细 介绍 叮 叮 书店 “ 试 读 ” 
页 面 的 实现 过 程 。 

本 章 要 点 : 

他 jQuery 基础 。 

妇 jQuery 特效 和 动画 。 

4 jQuery 对 HTML 元 素 进行 操作 。 


23.1 jQuery 基础 


jQuery 是 轻 量 级 JavaScript 库 。jQuery 可 以 对 HTML 元 素 进行 选取 和 操作 ， 通 过 程序 
对 CSS 进行 控制 ， 其 定义 了 很 多 HTML 事件 函数 ， 能 够 实现 JavaScript 特效 和 动画 ， 而 且 
更 方便 对 HTML DOM 进行 遍历 和 修改 。jQuery 极 大 地 简化 了 JavaScript 编程 ， 并 且 很 容 
易学 习 掌握 。 

jQuery 目前 最 新 的 版 本 是 3.3.1，jQuery2.0 以 上 版 本 不 再 支持 I[E6/7/8。 


23.1.1 添加 jQuery 库 


jQuery 库 位 于 一 个 JavaScript 文件 中 ， 其 中 包含 了 所 有 的 jQuery 函数 。 用 户 可 以 通过 
下 面 的 标签 把 jQuery 添加 到 页 面 中 : 

<head> 

<script src="js/jquery-3.3.1.min.js"></script> 
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</head> 


共有 两 个 版 本 的 jQuery 供用 户 下 载 (http://jquery.com/)， 一 个 是 精简 (迷你 版 的 ， 
另 一 个 是 未 压缩 的 (阅读 版 )。 


23.1.2 jQuery 的 语法 


jQuery 可 以 选取 HTML 元 素 ， 并 对 它们 执行 操作 。jQuery 的 基础 语法 如 下 : 
$ (selector) .action() 


其 中 ， 美 元 符号 “$” 定 义 jQuery，selector (选择 符 ) 选取 HTML 元 素 ，action() 执 行 对 元 
素 的 操作 。 


例如 : 

$ (this) .hide() /* 隐 藏 当前 元 素 */ 

$("p") .hide () /* 隐 藏 所 有 段落 */ 

$("#test") .hide ()  /* 隐 藏 所 有 id="test" 的 元 素 */ 
@ jQuery 选择 器 


jQuery 选择 器 主要 有 以 下 3 种 : 

1) 元 素 选择 器 

jQuery 使 用 CSS 选择 器 来 选取 HTML 元 素 ， 也 就 是 说 选取 元 素 的 方法 和 CSS 是 相 
同 的 。 

例如 ，S$("p") 选 取 <p> 元 素 ，$("p.intro") 选 取 所 有 class="intro" 的 <p> 元 素 。 

2) 属性 选择 器 

jQuery 使 用 XPath 表达 式 来 选择 带 有 给 定 属性 的 元 素 。XPath 是 一 种 在 XML 文档 中 
查找 信息 的 语言 ，XPath 使 用 路 径 表达 式 。 

例如 ，$("[href]") 选 取 所 有 带 有 href 属性 的 元 素 , $("[hre 伍 #]") 选 取 所 有 href 值 等 于 "#" 
的 元 素 。 

3) CSS 选择 器 

CSS 选择 器 可 用 于 改变 元 素 的 CSS 属性 。 

下 面 的 例子 把 所 有 p 元 素 的 背景 颜色 更 改 为 红色 : 

$("p") .css ("background-colorn，"redn") 7 

四 jQuery 事件 

jQuery 为 事件 处 理 进行 了 特别 设计 ，jQuery 事件 处 理 方法 也 是 采用 函数 的 形式 ， 通 常 
会 在 页 面 的 <head> 部 分 定义 事件 , 在 响应 事件 的 函数 中 编写 jQuery 代码 。 其 基本 结构 如 下 : 

$ (selector) .event (function(){ 


// 响 应 事件 代码 
]) 


其 中 ，event 指 选择 器 选择 的 元 素 的 某 一 事件 ， 括 号 里 面 是 响应 事件 的 函数 。jQuery 常用 的 


| 458 


第 23 章 jQuery 入 门 9 3 
事件 如 下 。 


(1) $(documenb ready(function): 将 函数 绑 定 到 文档 的 就 绪 事件 ( 当 文 档 完成 加 载 时 )。 

(2) $(selectonD.click(function): 触发 或 将 函数 绑 定 到 被 选 元 素 的 单 击 事件 。 

(3) S$(selector).dblclick(function): 触发 或 将 函数 绑 定 到 被 选 元 素 的 双击 事件 。 

(4) $(selector).focus(function): 触发 或 将 函数 绑 定 到 被 选 元 素 的 获得 焦点 事件 。 

(5) S$(selector).mouseover(function): 触发 或 将 函数 绑 定 到 被 选 元 素 的 鼠标 悬 停 事 件 。 

[ 贺 23.1 jQuery(event).html, 当 文档 完成 加 载 时 定义 文档 中 的 button 按钮 的 单 击 事件 ， 
当 单 击 该 按钮 时 隐藏 文档 中 的 所 有 段落 。 

源 代码 如 下 : 

<head> 

<title>jQuery 事件 </title> 

<script src="js/jquery-3.3.1.min.js"></script> 


| 


<script> 
$ (document) .ready (function (){ 
$ ("button") .click (function(){ 
$("p") .hide(1000) 
}) 
jn 
</script> 
</head> 
<body><p> 段 落 1</p><p> 段 落 2</p><button> 隐 藏 段落 </button></body> 


23.2 ”特效 和 动画 


@ jQuery 中 的 隐藏 和 显示 
通过 hide0 和 show0) 两 个 函数 ，jQuery 支持 对 元 素 的 隐藏 和 显示 。 其 语法 如 下 ; 


$ (selector) .hide (speed, callback) 
$ (selector) .show (speed, callback) 


其 中 ，speed 参数 规定 显示 或 隐藏 速度 ， 人 允许 的 值 有 "slow"、"fast"、"normal" 或 毫秒 。 例 如 : 
$ ("button") .click (function(){$("p") .hide(1000);}); 
四 jQuery 中 的 切换 
toggle0 函 数 使 用 show0 或 hide() 函 数 来 切换 元 素 的 可 见 状态 ， 包 括 隐 藏 显示 的 元 素 ， 
显示 隐藏 的 元 素 。 其 语法 如 下 : 
$ (selector) .toggle (speed, callback) 
其 中 的 参数 和 hide0 函 数 一 样 。 例 如 : 


$ ("button") .click (function(){$("p") .toggle();}); 


459 | 


其 
slideToggle() 函 数 对 被 选 元 素 切 换 向 上 滑动 和 向 下 滑动 。 
例如 : 
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全 jQuery 中 的 滑动 函数 

jQuery 拥有 以 下 滑动 函数 : 

$ (selector) .slideDown (speed, callback) 


$ (selector) .slideUp (speed, callback) 
$ (selector) .slideToggle (speed, callback) 


Ph，slideDown() 函 数 向 下 滑动 显示 被 选 元 素 ，slideUp0 函 数 向 上 滑动 隐藏 被 选 元 素 ， 


$(".flip") .click (function(){$(".panel") .slideDown ();}); 
$(".flip") .click (function(){$(".panel") .slideUp()}) 
$(".flip") .click (function(){$(".panel") .slideToggle();}); 


@ jQuery 中 的 淡 人 /淡出 函数 
jQuery 拥有 以 下 淡 入 /淡出 函数 : 
$ (selector) .fadeIn (speed, callback) 


$ (selector) .fadeout (speed, callback) 
$ (selector) .fadeTo (speed, opacity, callback) 


其 中 ，fadeIn0 函 数 淡 入 被 选 元素 ，fadeOut0 函 数 淡 出 被 选 元素 ，fadeTo0 函 数 把 被 选 元 素 
淡出 为 给 定 的 不 透明 度 ，fadeTo() 函 数 中 的 opacity 参数 规定 减弱 到 给 定 的 不 透明 度 。 
例如 : 


$ ("button") .click (function() {$ ("div") .fadeTo ("slow",0.25);}); 
$ ("button") .click (function() {$ ("div") .fadeout (4000);}); 


全 在 jQuery 中 自 定义 动画 

animate() 函 数 对 被 选 元 素 执 行 自 定义 动画 。 其 语法 如 下 : 

$ (selector) .animate ({params}, [duration], [easing], [callback]) 

参数 params 定义 产生 动画 的 CSS 属性 ， 用 户 可 以 同时 设置 多 个 此 类 属性 。 例 如 : 
animate ({width:"70%",opacity:0.4,marginLeft:"0.6in",fontsize:"3em"}); 
参数 duration 定义 动画 的 时 间 ， 人 允许 的 值 有 "slow"、"fast"、"normal" 或 毫秒 。 

参数 easing 定义 要 使 用 的 擦 除 效果 的 名 称 ( 需 要 插件 支持 )， 一 般 不 用 。 

HTML 元 素 默 认 是 静态 定位 ， 无 法 移动 ， 如 果 需 要 元 素 移动 ， 必 须 把 CSS position 设 


置 为 relative 或 absolute。 


[ 贺 23.2 jQuery(animate) html， 演 示 了 一 个 块 元 素 变 大 又 还 原 并 移动 的 动画 效果 。 
源 代码 如 下 : 

<head> 

<title>jQuery 动画 </title> 

<acript src="1s/ jquery 3.301 .min. 3"></script> 

<script> 
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数 在 
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$ (document) .ready (function (){ 
$("#start") .click (function(){ 
$ ("#box") .animate ({height:200},"slow"); 
$ ("#box") .animate ({width:200},"slow"); 
$ ("#box") .animate ({height:100},"slow"); 
$ ("#box") .animate ({width:100},"slow"); 
nD; 
DD); 
$ (document) .ready (function (){ 
$("#start") .click (function(){ 
$("#box") .animate ({left:"100px"},"slow"); 
$ ("#box") .animate ({fontsize:"3em"},"slow"); 
]) 
DD); 
</script> 
<style> 
#box{border:#000 lpx solid; width:100px; height:100px; position:relative;} 
</style> 
</head> 
<body> 
<div id="box"> 动 画 </div><button id="start"> 开 始 </button> 
</body> 


参数 callback 是 在 函数 完成 之 后 被 执行 的 函数 名 称 ， 也 称 为 callback 函数 ，callback 函 
当前 动画 100% 完 成 之 后 才能 执行 。 
许多 jQuery 函数 涉及 动画 ， 这 些 函 数 也 许 会 将 speed 或 duration 作为 可 选 参数 。 由 于 


JavaScript 语句 是 逐一 执行 的 ， 按照 次 序 , 动画 之 后 的 语句 可 能 提前 执行 ， 也 可 能 产生 错误 
或 页 面 冲突 ， 因 为 动画 还 没有 完成 。 例 如 下 面 的 代码 : 


$ (document) .ready (function(){ 
$("#start") .click (function(){ 
$("#bozx") .hide (1000); 
alert ("这 个 块 已 经 隐藏 ") ; 
]) 7 
DD); 


当 块 元 素 还 没有 隐藏 时 ， 警 


告 消息 框 已 经 弹出 来 了 。 为 了 避免 这 个 情况 ， 可 以 用 


“function() {alert(" 这 个 块 已 经 隐藏 ");” 函 数 作 为 callback 参数 。 例 如 : 


$ (document) .ready (function(){ 
$("#start") .click (function(){ 
$ ("#box") .hide (1000, function () {alert ("这 个 块 已 经 隐藏 ") ; } ) ; 
Ds; 
1); 


461 | 


从 入 门 到 实战 一 HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 


23.3 ”HTML 操作 


@ 改变 HTML 内 容 

html0 函 数 改变 所 匹配 的 HTML 元 素 的 内 容 。 其 语法 如 下 : 

$ (selector) .html (content) 

例如 将 所 有 段落 的 内 容 改 为 “清华 大 学 ”: 

$("p") .html ("清华 大 学 ") ; 

@ 添加 HTML 内 容 

append0) 函 数 向 所 匹配 的 HTML 元 素 内 部 追加 内 容 。 其 语法 如 下 : 
$ (selector) .append (content) 

例如 在 所 有 段落 的 内 容 后 边 添加 “清华 大 学 ”4 个 字 : 

$ ("p") .append ("清华 大 学 "); 

全 CSS 函数 

jQuery 拥有 3 种 用 于 CSS 操作 的 重要 函数 : 

1) 设置 单一 属性 值 
css(name,value) 函 数 为 所 有 匹配 元 素 的 给 定 CSS 属性 设置 值 。 其 语法 如 下 : 
$ (selector) .css (name, value) 

例如 设置 所 有 段落 的 背景 色 为 红色 : 

$("p").css("background-color", "red"); 

2) 设置 多 个 属性 值 
css({properties}) 函 数 同 时 为 所 有 匹配 元 素 的 一 系列 CSS 属性 设置 值 。 其 语法 如 下 : 
$ (selector) .css ({properties}) 

例如 设置 所 有 段落 的 背景 色 为 红色 并 且 字 体 大 小 为 正常 的 两 倍 : 
$("p").css({"background-color":"red", "font-size":"200%"}); 

3) 获取 属性 值 

css(name) 函 数 返 回 指定 的 CSS 属性 的 值 。 其 语法 如 下 : 

$ (selector) .css (name) 

例如 获得 当前 元 素 的 背景 色 : 

$ (this) .css ("background-color"™); 


@ jQuery Size 操作 
jQuery 拥有 两 种 用 于 尺寸 操作 的 重要 函数 : 


| 462 


第 23 章 jQuery 入 门 23 


1) 高 度 

height(value) 函 数 设 置 所 有 匹配 元 素 的 高 度 。 其 语法 如 下 : 
$ (selector) .height (value) 

例如 将 元 素 的 高 度 设 为 200px: 

$("#id100") .height ("200px"); 

2) 宽度 

width(value) 函 数 设 置 所 有 匹配 元 素 的 宽度 。 其 语法 如 下 : 
$ (selector) .width (value) 

例如 将 元 素 的 宽度 设 为 300px: 


$("#id200") .width ("300px"); 


23.4 Ajax 函数 


jQuery 提供 了 用 于 Ajax 开发 的 丰富 函数 。 其 中 ，jQuery 的 load0 函 数 是 一 个 简单 但 功 
能 很 强大 的 Ajax 函数 。 其 语法 如 下 : 
$ (selector) .load (url,data, callback) 


其 中 ，selector 定义 要 加 载 某 一 页 面 进行 显示 的 元 素 ，url 参数 指定 加 载 页 面 的 Web 地 址 。 
例如 在 id="feeds" 的 元 素 里 面 显示 feeds.html 页 面 内 容 : 


$ ("#feeds") .load ("feeds.html"); 


23.5 ” 叮 叮 书店 “ 试 读 ”页 面 的 建立 


叮 叮 书店 “ 试 读 ” 页 面 用 jQuery 实现 了 可 折 和 县 的 菜单 ， 用 jQuery Ajax 实现 了 框架 

启动 WebStormm， 打 开 叮 叮 书店 项 目 及 外 部 样式 表 文 件 style.css 〈 在 第 14.3 节 建 立 )。 

选择 【文件 】I 【新 建 】 命 令 , 打开 【新 建 】 列表 框 ,在 【新 建 】 列表 框 中 单 击 bookstore 
模板 ， 出 现 【 新 建 bookstore】 对 话 框 ， 在 【文件 名 称 】 文 本 框 中 输入 “accordion”， 单 击 
【确定 】 按 钮 ， 进 入 accordion.html 编辑 区 。 

将 光标 定位 到 “<title>” 后 面 ， 选 中 “ 叮 叮 书店 ”4 个 字 ， 替 换 为 “ 试 读 ”， 再 将 光标 
移动 到 “<a href="index.html"> 首 页 </a> &gt;&gt; ”后面 ， 插 入 “ 试 读 ” 文 本 ， 然 后 将 光标 
移动 到 “&gt&gt 试 读 </section>” 后 面 ， 按 回 车 键 ， 输 入 下 面 的 代码 。 

<section class="Ajaxcontent"> 

<h3> 前 言 </h3> 
<p> 本 教程 阐述 了 Web 的 基本 技术 ， 主 要 围绕 网 站 前 端 设计 所 必须 知道 的 知识 进行 展开 ， 包 括 
Web 体系 、 超 文本 与 标记 语言 和 浏览 器 ， 重 点 介绍 了 HTML5、CSS3 和 JavaScript 等 Web 
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前 端 应 用 的 基础 知识 和 关键 技术 ， 在 阐述 必 不 可 少 的 理论 知识 之 外 ， 着 
来 为 读者 提供 了 一 个 确实 掌握 Web 基本 技术 的 指南 。</p> 


</section> 


用 下 面 的 源 代 码 蔡 换 原 <aside></aside> 里 的 内 容 。 


<div class="bar"> 
<h2> 《Web 前 端 设 计 基础 一 HTML5、CSS3、JavaSscript》</h2> 
<h3> 作 者 : 张 树 明 </h3> 
<a href="#" class="all-show"> 全 部 展开 </a>gnbsp; gnbsp;<a href="#" 
class="all-hide"> 全 部 折 受 </a> </div> 
<div class="list"> 
<dl> 
<dt> 第 1 章 Web 技术 概述 </dt> 
"#" class="mll">1.1 Internet 概述 </a></dd> 
<dd><a href="#" class="m1l2">1.2 Web 概述 </a></dd> 
<qdd><a href="#">1.3 超 文本 与 标记 语言 </a></dd> 
<dd><a href="#">1.4 Web 标准 </a></dd> 
<dd><a href="#">1.5 浏览 器 </a></dd> 
<dd><a href="#">1.6 Web 开发 工具 </a></dd> 
</dl> 
<dl> 
<dt> 第 2 章 HTML5 基础 </dt> 
<dd><a href="#">2.1 HTML 基础 </a></dd> 
<dd><a href="#">2.2 WebStorm 基础 </a></dd> 
<dd><a href="#">2.3 文档 结构 元 素 </a></dd> 
<dd><a href="#">2.4 头 部 元 素 </a></dd> 
</dl> 
</div> 


在 head 里 面 定义 如 下 内 部 样式 。 


<style> 
/*Accordion*/ 


通过 实际 操作 的 案例 


aside{border: lpx solid hsl(20,30%,50%);box-sizing: border-box;} 
h2{color:hsl (20, 50%, 30%) ;text-align: center;} 
h3{text-align: center;} 
.list, .bar{padding: 10px 10px;} 
.list dl{cursor:pointer;} 
.bar a,.list dl dt{font-size:1lrem} 
.list a, .bar a{text-decoration:none;color:hsl (0,0%,0%);} 
.list a:hover, .bar a:hover{color:hsl(20,30%,50%);} 
.list dl dd{margin-left:10px;display:none;} 
.right-footer a{font-size:lrem;} 
</style> 


在 head 里 面 编 写 如 下 jQuery 程序 。 


<script src="js/jquery-3.3.1.min.js"></script> 
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第 23 章 jQuery 入 门 2 3 


<script> 
$ (function(){ 


St lst dt colicr(fanctiont)t 
$ (this) .nextAll() .slideToggle (); 
Var sTc=$ (this) .css ("color"); 
F(Tec "rbD(0 0 OOM(Ebis) cst color ET34633 3) 
else{$ (this) .css({"color":"#000000"});} 
条 
$('.all-show') .click (function(){ 
$('.list dl dd').slideDown(); 
Sullast a dt J) css(t colors m34633" 
}) 
$('.all-hide') .click (function(){ 
$('.list dl dd').slideUp(); 
$(".1list dl dt').css({"color":"#000000"}); 
}) 
St mi click(function(t)t 
$('.Ajaxcontent') .load('mll.html'); 
S(Tist dl daa")-.css(("color™:"#000000"Y)>. 
$ (this) .css({"color":"#FF9900"}); 
}) 
$i( ml2" .cliick(function(t)t 
$('.Ajaxcontent') .load('ml2.html'); 
st 1ist dl dd a).css(t"color™:”#000000™})s 
$ (this) .css({"color":"#FF9900"}); 
}) 


</script> 


其 中 ，mll.html 和 m12.html 是 独立 的 页 面 文件 ， 页 面 内 容 是 书 的 相应 章节 。“ 试 读 ” 页 面 
的 显示 效果 如 图 23.1 所 示 。 


叮 叮 书店 


特刊 降价 联系 我 们 关于 我 们 
您 现在 的 位 置 : 首页 >> 试 法 


本 教程 十 述 了 Web 的 基本 技术 ， 主 要 国 绕 网 站 前 内 设计 所 必须 知道 的 知识 进行 
展开 ,包括 Web 体 票 、 超 义 全 与 标记 语言 和 浏览 名 ,重点 介绍 J 了 HTML5、CSS3 和 
JavaScript 等 Web 前 氏 应 用 的 基础 知识 和 关键 技术 ， 在 潭 述 必 不 可 少 的 理论 知识 之 
外 , 着重 通过 实际 操作 的 守 例 来 为 污 者 提供 了 一 个 确实 重 握 Web 基 本 技术 的 指南 . 


12 Web 酸 述 
13 超 文本 与 标记 酒 计 
1.4 Web 标 准 
15 浏览 器 
1.6 Web 开 发 工具 
第 2 章 HTML5 基 础 
Z1HTML 关 而 


2.2 Webstorm 基 础 
2.3 文档 结构 元 素 
2.4 头 部 元 素 


关于 我 们 。 ”服务 条 款 。。 隐私 策略 联系 我 们 
图 23.1 叮 叮 书店 “ 试 读 ”页 面 示 意图 
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提示 : Ajax 效果 必须 在 Web 服务 器 运行 时 才能 显现 。 


23.6 小结 


本 章 简要 介绍 了 jQuery 的 基础 知识 、jQuery 特效 和 动画 过 程 以 及 jQuery 对 HTML 元 
素 操作 的 方法 。 


23.7 习题 


@ 选择 题 
(1) 下 列 不 是 jQuery 选择 器 的 是 Ys 
A. 元 素 选择 器 B. 属性 选择 器 
C. CSS 选择 器 D. 分 组 选择 器 
(2 ) 函数 用 来 切换 元 素 的 可 见 状态 。 
A. show() B. hide0 C. toggle0 DD. slideToggle() 
四 简 答题 


(1) jQuery 如 何 对 HTML 元 素 进行 操作 ? 
(2) jQuery 的 load0 函 数 的 主要 作用 是 什么 ? 
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实验 1 HTML5 内 容 结构 和 文本 


@ 实验 目的 

(1) 掌握 HTML5 结构 标签 。 

(2) 掌握 HIML5 基础 标签 和 列表 。 

(3) 能 够 用 结构 标签 确定 网 页 内 容 结构 ， 在 相应 的 结构 区 域内 填充 和 文本 相关 的 内 容 。 
@ 实验 内 容 

(1) 参照 图 A.1 所 示 页 面 用 HIMLS 结构 标签 完成 页 面 的 内 容 结构 。 其 中 页 面 最 上 面 
的 带 有 “世界 地 球 日 ”文字 的 是 logo 图 像 。 


目录 做 什么 
等 年 的 4 月 22 巨 ， 是 一 个 专 为 世界 环境 保护 而 设立 的 。 活动 影响 ”倡导 低 磋 生 活 
节日 ， 旨 在 提高 民众 对 于 现 有 环境 问题 的 意识 ， 并 动员 民 。， 他 和 8 人 ”从 身边 的 小 事 做 起 
众 参 与 到 环保 运动 中 ， 通 过 绿色 低 碳 生 活 ， 改 善 地 球 的 整 ”历年 主题 》 从 节约 资源 做 起 
体 环境 。 地 球 日 由 善 洛 德 .尼尔森 和 上 丹 尼 了 时. 海 斯 于 1970 年 。 历年 国内 活动 ， 科学 发 展 
发 起 - 现今 ,地 球 日 的 庆祝 活动 已 发 展 至 全 球 192 个 国 ， 公众 参与 
冢 ， 每 年 有 超过 10 亿 人 参 握 其 中 ， 使 其 或 为 世界 上 最 大 的 ”防治 有 毒化 学 帅 污 染 


民间 环保 节日 。 中 国 从 20 世 纪 90 年 代 起 ,每 年 都 会 在 4 月 
22 日 举办 世界 地 球 日 活动 。 

1970 年 4 月 22 日 的 地 球 日 活动 ， 是 人 类 有 宁 以 来 笔 一 
次 规 栖 羡 大 的 群众 地 球 日 , 作为 人 类 现代 环保 运动 的 开 
端 ， 它 推动 了 西方 国家 环境 法 规 的 建立 


图 A.1 页 面 示意 图 
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内 容 结构 由 页 头 、 导 航 、 内 容 和 页 脚 4 个 部 分 构成 ， 其 中 内 容 区 又 由 内 容 和 两 个 边栏 

3 个 部 分 构成 
(2) 使 用 HTMLS5 基础 标签 和 列表 标签 将 文本 内 容 填 加 到 对 应 的 结构 区 域内 。 
完成 后 页 面 显示 效果 如 图 A.2 所 示 。 


。 首 页 
。 目录 
。 关于 我 们 
。 联系 我 们 


地 球 日 


每 年 的 4 月 22 日 ， Pe 旨 在 提高 民众 对 于 现 有 环境 问题 的 意识 ， 并 动员 民众 参与 到 环保 运动 中 ， 通 过 

绿色 低 碳 生活 ， 。 地 球 日 由 盖 洛 德 .尼尔森 和 丹尼斯 海 斯 于 1970 年 发 起 。 现 今 ， 地 球 日 的 庆祝 活动 已 发 展 至 全 球 192 
个 国家 ， et 使 其 成 为 世界 上 最 大 的 民间 环保 节日 。 中 国 从 20 世 纪 90 年 代 起 ,每 年 都 会 在 4 月 22 日 举办 世界 地 
球 日 活动 。 


1970 年 4 月 22 日 的 地 球 日 活动 ， 是 人 类 有 史 以 来 第 一 次 规模 宏大 的 群众 地 球 日 ， 作 为 人 类 现代 环保 运动 的 开端 ， 它 推动 了 西方 国家 环境 
法 规 的 建立 。 


目录 


。 活动 影响 
。 创始 人 


。 历年 主题 


。 历年 国内 活动 
做 什么 


。 和 
©2018 ,我 们 的 地 球 日 


图 A.2 页 面 显 示 效 果 图 


实验 2 ” HTML5 超 链 接 和 多 媒体 


© 实验 目的 
(1) 掌握 HTMLS5 超 链 接 和 图 像 标签 。 
(2) 能 够 正确 使 用 各 种 超 链接 的 用 法 。 


@ 实验 内 容 
参照 图 A.1 所 示 页 面 ， 在 实验 1 网 页 的 基础 上 ， 进 行 下 列 操作 : 


(1) 在 页 头 区 域 添加 logo 图 像 ， 图像 路 径 为 images/headerimg.jpg。 在 内 容 区 介绍 地 球 
文字 的 前 面 添加 图 像 ， 图 像 路 径 为 images/greenery.png。 

(2) 将 导航 区 4 个 列表 项 设 为 超 链 接 ， 其 中 “首页 ” 超 链接 地 址 为 index.html,“ 目 录 ” 
超 链接 地 址 为 list.html,“ 关 于 我 们 ” 超 链接 地 址 为 about.html,“ 联 系 我 们 ” 超 链接 地 址 为 
contacthtml。 内 容 区 边栏 一 “目录 ”的 列表 项 设 为 链接 到 页 面 开始 位 置 。 内 容 区 边栏 二 “做 
什么 ”的 列表 项 设 为 链接 到 当前 位 置 。 

完成 后 页 面 显示 效果 如 图 A.3 所 示 。 
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每 年 的 4 月 22 日 ， 是 一 个 专 为 世界 环境 保护 而 设立 的 节日 ， 旨 在 提高 民众 对 于 现 有 环境 问题 的 意识 ， 并 动员 民众 参与 到 环保 运动 中 ， 
通过 绿色 低 碳 生活 ， 改 善 地 球 的 整体 环境 。 地 球 日 由 羡 洛 德 尼 尔 麻 和 月 尼斯 . 海 斯 于 1970 年 发 起 。 现 今 ， 地球 日 的 庆祝 活动 已 发 展 至 
et 每 年 有 超过 10 亿 人 参与 其 中 ， 使 其 成 为 世界 上 最 大 的 民间 环保 节日 。 中 国 从 20 世 纪 90 年 代 起 , 每 年 都 会 在 4 月 22 日 


1970 年 4 月 22 日 的 地 球 日 活动 ， 是 人 类 有 多 以 来 第 一 次 规模 宏大 的 群众 地 球 日 ， 作 为 人 类 现代 环保 运动 的 开端 ， 它 推动 了 西方 国家 环 
境 法 规 的 建立 。 


。 从 节约 资源 化 起 

。 科 学 发 层 

a 
@2018 , 我们 的 地 球 日 


图 A.3 页 面 显示 效果 图 


实验 3 ”HTML5 表格 和 表单 


@ 实验 目的 

(1) 掌握 HTMLS5 常用 表格 标签 。 

(2) 掌握 HTMLS 常用 表单 标签 。 

@ 实验 内 容 

(1) 参照 图 A.4 所 示 完 成 新 用 户 注册 的 表单 页 面 。 


(2) 要 求 用 表格 为 表单 元 素 进行 布局 定位 ， 即 表单 元 素 需要 嵌 套 在 单元 格 中 。 


完成 后 页 面 显示 效果 如 图 A.4 所 示 。 
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新 用 户 注 册 
提示 : 请 勿 设置 与 邮箱 密码 相同 的 账户 登录 密码 ， 防 止 不 法 分 子 窃取 您 的 账户 信息 ! 
手机 号 码 | 谊 洽 入 您 的 手机 码 “| 手机 号 可 用 于 登录 、 找 回 密码 、 接 收 通 知 等 服务 


图 A.4 页 面 显 示 效果 图 


实验 4 CSS3 布局 与 定位 


@ 实验 目的 

(1) 掌握 CSS3 盒 模型 常用 属性 。 

(2) 掌握 CSS3 定位 方式 和 浮动 。 

(3) 掌握 CSS3 常用 显示 类 型 。 

(4) 重点 掌握 CSS3 伸缩 盒 模型 。 

@ 实验 内 容 

参照 图 A.1 所 示 页 面 ， 在 实验 2 网 页 的 基础 上 ， 进 行 下 列 操作 : 

(1) 建立 外 部 样式 表 文件 styles.css， 用 link 标签 建立 和 样式 文件 styles.css 的 连接 。 

(2) 采用 弹性 伸缩 盒 ， 响 应 式 Web 设计 思想 布局 。 要 求 页 头 、 导 航 、 内 容 和 页 脚 4 个 
部 分 宽度 为 80%, 最 大 宽度 960px, 最 小 宽度 260px。 内 容 区 3 个 部 分 显示 区 域 比 例 为 2:1:1。 

完成 后 ， 当 浏览 器 宽度 最 大 时 ， 页 面 显示 效果 如 图 A.5 所 示 ， 当 浏览 器 宽度 最 小 时 ， 
页 面 显示 效果 如 图 A.6 所 示 。 


地 球 日 目录 
二 每 年 的 4 月 22 日 , 是 一 个 专 为 世界 环境 保护 。 活动 E2 昌 


而 8 立 的 节目， 攻 在 提 训 民众 对 于 现 有 环境 。 刘 褒 人 
问题 的 意识 ， 并 动员 民众 参与 到 环保 运动 。 历年 主题 
中 ,通过 绿色 低 碳 生活 ,改善 王国 内 活动 
境地 球 日 由 盖 洛 德 尼 尔 素 和 有 丹尼斯 海 斯 

于 1970 年 发 起 .现今 , 地球 日 的 庆祝 活动 

已 发 展 至 全 球 192 个 国家 ,每 年 有 超过 10{Z 

人 参与 其 中 ， 使 其 成 为 世界 上 县 大 的 民间 环 

保 节日 。 中 国 从 20 世 纪 90 年 代 起 ,每 年 部 

会 在 4 月 22 日 举办 世界 地 球 日 活动 。 

1970 年 4 月 22 日 的 地 球 日 活动 , 是 人 类 有 史 

以 来 第 一 次 规模 宏大 的 群 从 地球 日 ， 作为 人 

闫 现代 环保 活动 的 开 庙 , 它 推动 了 西方 国家 
环境 法 规 的 建立 - 


©2018 ,我们 的 地 球 日 


图 A.5 页 面 显 示 效果 图 (一 ) 
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每 年 的 4 月 22 日 ， 是 一 个 屋 


专 为 世界 环境 保护 而 设立 ， 公 从 参 
的 节日 ， 旨 在 提高 民众 对 与 

于 现 有 环境 问题 的 意识 ， 。 肪 治 有 
并 动员 民众 参与 到 环保 运 理化 尝 
动 中 ， 通 过 绿色 低 页 生 品 污染 


活 ， 改 善 地 球 的 整体 环 


图 A.6 页 面 显示 效果 图 (二 ) 


实验 5 CSS3 元 素 外 观 样式 设计 


@ 实验 目的 

(1) 掌握 CSS3 背景 、 字 体 、 文 本 修饰 与 效果 、 列 表 和 尺寸 等 常用 属性 。 
掌握 图 文 混 排 的 一 般 方法 。 

(3) 掌握 常用 菜单 的 样式 设计 方法 。 

(4) 掌握 CSS3 的 常用 伪 类 。 


@ 实验 内 容 

参照 图 A.1 所 示 页 面 ， 在 实验 4 网 页 的 基础 上 ， 完 成 页 面 外 观 样式 设计 。 

(1) 整个 页 面 的 背景 色 为 械 DF6F7， 字体 颜色 为 #060606， 字体 为 微软 雅 黑 ， 字 体 大 小 
为 14px。 


(2) 导航 和 页 脚 区 背景 色 为 #384E80, 标题 字 的 颜色 为 #83B441, 段落 首 行 缩 进 两 个 字 ， 
边栏 列表 项 标记 图 像 为 images/arrow.gif。 

(3) 导航 菜单 字体 颜色 为 #DCF4F4， 当 鼠标 虞 停 时 带 有 下 夯 线 修饰 。 当 鼠标 在 边栏 超 
链接 悬 停 时 ， 字 体 颜 色 变 为 的 F822F， 带 有 下 画 线 修饰 。 

(4) 未 具体 说 明 的 样式 与 图 A.1 相近 。 


实验 6 CSS3 动画 


@ 实验 目的 
掌握 CSS3 变换 、 过 渡 、 动 画 的 一 般 用 法 。 
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W, 前 端 设计 

从 入 门 到 实战 一 -HTML5、CSS3、JavaScript 项 目 案例 开发 (第 2 版 ) 

@ 实验 内 容 

用 CSS3 实现 有 3 个 图 像 的 幻灯 片 切换 效果 。 

打开 页 面 后 ， 首 先 显示 第 一 个 图 像 ， 约 3 秒 后， 第 一 个 图 像 向 下 移动 ， 第 二 个 图 像 自 

上 而 下 也 跟着 移动 ， 占 满 整个 区 域 后 暂停 ; 约 3 秒 后 ， 第 二 个 图 像 向 下 移动 ， 第 三 个 图 像 

自 上 而 下 也 跟着 移动 ， 占 满 整 个 区 域 后 暂停 ; 约 3 秒 后 ， 整 个 过 程 重新 开始 。 
页 面 显 示 效 果 如 图 A.7 所 示 。 


成 就 开发 高 手 


循序 斯 进 ,配合 解决 实际 问题 的 项 目 实施 孝 学 
让 初学 者 快速 掌握 实用 开发 技能 


美亚 五 星 畅 销 书 下 
Python 有 


神经 网 给 编程 RE 


图 A.7 页 面 显 示 效 果 图 


实验 7 行为 与 对 象 及 DOM 


@ 实验 目的 
(1) 掌握 JavaScript 基本 语法 和 语句 。 


行为 的 实现 过 程 。 

(3) 掌握 常用 对 象 的 属性 和 方法 。 

(4) 能 够 通过 DOM 对 页 面 的 结 点 进行 访问 和 控制 。 

@ 实验 内 容 

编写 一 个 猜 数 字 游 戏 ， 具 体 要 求 : 游戏 开始 后 ， 由 系统 随机 产生 一 个 1 一 100 的 整数 ， 
让 玩家 猜 这 个 数 是 什么 。 每 猜 一 次 ， 系 统 提示 玩家 猜 的 数 是 大 一 些 还 是 小 一 些 ， 并 记录 玩 
家 每 次 猜 的 数 和 次 数 ， 直 到 猜 对 为 止 。 然 后 再 重新 开始 游戏 。 

页 面 显示 效果 如 图 A.8 所 示 。 


数字 猜谜 游戏 


我 们 选择 了 1 到 100 之 问 的 随机 数 ， 看 看 你 能 用 几 次 猜 出 ， 我 们 会 随 
时 提示 你 苇 测 的 数 是 太 大 还 是 太 小 . 


还 有 9 次 机 会 ! 
输入 一 个 你 甘 测 9 数 :| 
先前 猜测 的 数 : 50 


最 后 鳍 出 B 数 太 大 了 ! 


图 A.8 页 面 显示 效果 图 
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附录 A 实验 人 


实验 8 HTML DOM 表单 数据 验证 


@ 实验 目的 

(1) 掌握 常用 HTML DOM 对 象 。 

(2) 掌握 HIML DOM 表单 数据 验证 方法 。 
(3) 能 够 正确 使 用 正则 表达 式 。 

@ 实验 内 容 
在 实验 3 新 用 户 注册 表单 页 面 基础 上 ， 当 用 户 提交 表单 时 ， 对 表单 数据 过 


足下 面 4 项 后 ， 表 单 才能 真正 提交 : 
(1) 手机 号 码 、 登 录 密 码 、 确 认 密码 和 验证 码 为 必 填 项 。 
(2) 登录 密码 、 确 认 密码 要 求 输入 一 样 。 
(3) 验证 码 需要 与 已 知 的 验证 码 进 行 比 对 验证 ， 可 自行 设 定 已 知 验证 码 。 
(4) 必须 阅读 并 同意 《社区 条 款 》。 


实验 9 _ HTML5 DOM 


@ 实验 目的 

(1) 掌握 HTML DOM 事件 对 象 。 
性 握 常 用 HTMLS DOM 对 象 。 

@ 实验 内 容 


F 行 验证 。 满 


在 页 面 上 显示 一 个 田 字 格 ， 用 鼠标 像 画 笔 一 样 在 田 字 格 里 写字 ， 单 击 “ 清 除 ” 按 钮 ， 


清除 所 有 的 笔画 。 
页 面 显示 效果 如 图 A.9 所 示 。 


图 A.9 页 面 显示 效果 图 
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图 书 资 源 支 持 


感谢 您 一 直 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 

提供 配套 的 资源 ,有 需求 的 读者 请 扫描 下 方 的 " 书 圈 " 微 信 公众 号 二 维 码 , 在 图 
书 专区 下 载 ,也 可 以 拨打 电话 或 发 送 电子 邮件 咨询 。 

如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
也 请 您 发 邮件 告诉 我 们 ,以便 我 们 更 好 地 为 您 服务 。 


我 们 的 联系 方式 : 


地  ” 址 ; 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 
资源 下 载 、 中 天 

邮 编 : 100084 昌 

电 话 : 010 一 62770175 一 4604 


资源 下 载 : http://www.tup.com. cn 


电子 邮件 : weij@tup. tsinghua. edu. cn 


QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 


用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 “ 书 圈 ”。 


